填充空间后顺风CSS截断

我正在用Tailwind CSS和Vue.js构建一张卡。我想用文本填充卡片上的一个空格，并截断任何不适合省略号的剩余文本

我已经应用了Tailwinds.truncate类，但是它只允许我在省略号之前有一行文本。我也研究了线夹的性能，但我希望有一个更好的方法来实现这一点与顺风

<template>
     <div class="p-6 w-full bg-white rounded-lg overflow-hidden shadow-lg border">
        <div class="flex flex-col sm:flex-row">
            <img src="img/card-default.jpg" class="mx-auto" alt="Card">
            <div class="mt-4 overflow-hidden sm:ml-4 flex flex-col justify-between">
                <div>
                    <h2 class="text-gray-900 font-semibold text-lg">Title</h2>
                    <p class="truncate mt-2 text-gray-700 max-h-full">
                        Lorem ipsum, dolor sit amet consectetur adipisicing elit.
                        Tempore repellat labore distinctio maxime, debitis autem perferendis dolore, 
                        deleniti doloribus quia vel! Amet nisi, a vel modi officiis sapiente fugiat, 
                        illum delectus, incidunt repellendus suscipit. Delectus iusto eligendi, doloribus amet et fugiat,
                         atque perspiciatis eveniet, ipsum inventore sed placeat sapiente maiores.
                    </p>
                </div>
                <div class="flex justify-around mt-4 mx-2 sm:mx-0">
                    <button class="mx-2 bg-indigo-600 p-2 rounded-lg text-white hover:bg-indigo-500 sm:mx-0">Button 1</button>
                    <button class="mx-2 bg-indigo-600 p-2 rounded-lg text-white hover:bg-indigo-500 sm:mx-0">Button 2</button>
                </div>
            </div>
        </div>
     </div>
</template>

标题

Lorem ipsum，dolor sit amet Concertetur Adipising Elite。
暂时性排便，最大限度地排便，
德莱尼蒂·多洛里巴斯，快！阿梅特·尼西，一位智者，
盲蝽，包括驱虫剂。eligendi、doloribus amet和fugiat代表团，
伊文涅易懂，益普生发明于sapiente maiores。

按钮1
按钮2

---

简短回答：不，他们的解决方案不是更好的

tailwind旨在涵盖开发人员/设计师的“基础”，如填充、边距、网格等，以便他们能够轻松快速地创建页面/组件

您使用/询问的内容完全是针对您的情况定制的

您的问题的可能解决方案：

• 编写一个扩展默认tailwind css的tailwind插件
• 使用自定义css扩展tailwind.scss
• 或者只是css（内嵌或只是自定义css文件）