填充空格后 Tailwind CSS 截断

Posted 2023-03-06

【中文标题】填充空格后 Tailwind CSS 截断

【英文标题】：Tailwind CSS truncate after filling a space

【发布时间】：2020-03-02 21:40:30

【问题描述】：

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

我已经应用了 Tailwinds .truncate 类，但是它只允许我在省略号之前有 1 行文本。我还研究了 line-clamp 属性，但我希望 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" >
            <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>

【参考方案1】：

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

tailwind 旨在为开发人员/设计人员提供填充、边距、网格等“基础知识”，以便他们可以轻松快速地创建页面/组件。

您正在使用/询问的内容完全是根据您的情况定制的。

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

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

【参考方案2】：

使用@tailwind/line-clamp 插件

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