如何在TailwindCSS中截断文本？

rsl1atfo 于 2022-12-20 发布在其他

关注(0)|答案(1)|浏览(170)

我在TailwindCSS中使用truncate来在文本溢出超过一行时进行文本省略，但它不起作用。
我的代码不工作如下：

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

我该如何补救

css

来源：https://stackoverflow.com/questions/71093772/how-to-truncate-text-in-tailwindcss

1条答案

按热度按时间

piztneat1#

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

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

赞(0）回复(0）举报 2022-12-20

我来回答

如何在TailwindCSS中截断文本？

1条答案

相关问题

热门标签

最新问答