Tailwind CSS 在填充 space 后截断

Question

我正在使用 Tailwind CSS 和 Vue.js 制作卡片。我想用文本填充卡片上的 space 并截断任何不适合省略号的剩余文本。

我已经应用了 Tailwinds .truncate class 但是它只允许我在省略号之前有 1 行文本。我也研究了线夹属性但我希望有更好的方法来使用 Tailwind 来做到这一点。

<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>

Answer 1

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

tailwind is meant to be cover the ‘basics’ like padding, margin, grid etc for developers/designers so they can create easily and fast pages/components.

你是什么 using/asking 完全是根据你的情况定制的。

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

编写扩展默认 tailwind 的 tailwind 插件 css
使用您的自定义扩展 tailwind.scss css
或仅 css（内联或仅您的自定义 css 文件）

Answer 2

使用 @tailwind/line-clamp 插件

<p className="line-clamp-n"> 其中 n 代表截断前你想要的行数

Tailwind CSS 在填充 space 后截断

Tailwind CSS truncate after filling a space

css

tailwind-css