如何在 TailwindCSS 中截断文本？

Question

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

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

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

我该如何解决？

Answer 1

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

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

如何在 TailwindCSS 中截断文本？

How to truncate text in TailwindCSS?

css

tailwind-css