如何在 TailwindCSS 中截断文本？

Question

我truncate在 TailwindCSS 中使用，如果文本溢出超过一行，则使文本省略，但它不起作用。

我的代码在下面不起作用：

<div className="ml-1 inline-block">
   <span>Label: </span>
   <span className="font-semibold truncate">
     long texttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttt
   </span>
</div>

我该如何修复它？

Answer 1

更新 - 线夹

Tailwind 现在默认有线夹插件。所以你可以使用line-clamp-1

  <div className="ml-1 inline-block w-[200px]">
     <span>Label: </span>
     <span className="font-semibold line-clamp-1">
       long texttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttt
     </span>
  </div>

旧答案

首先，您的父元素或元素必须具有特定的宽度，否则元素如何知道何时停止和截断？另外，为了截断工作，您的元素的显示不得显示，inline因为span默认情况下是内联显示，您应该将其更改为block

  <div className="ml-1 inline-block w-[200px]">
     <span>Label: </span>
     <span className="font-semibold line-clamp-1">
       long texttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttt
     </span>
  </div>

Answer 2

在顺风中截断是相当令人沮丧的。请改用这个插件

从 npm 安装它

npm install @tailwindcss/line-clamp

然后将其添加到tailwind.config.js文件中

plugins: [
    require('@tailwindcss/line-clamp')
  ],

要使用它只需将其添加为一个类className="line-clamp-1"

这是文档

https://tailwindcss.com/blog/multi-line-truncation-with-tailwindcss-line-clamp

Answer 3

为了不设置元素的固定宽度，您可以简单地指定min-width父块的宽度。

 <div className="ml-1 inline-block min-w-0">
         <span>Label: </span>
         <span className="font-semibold truncate block">
           long texttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttt
         </span>
     </div>