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

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

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

我该怎么修？

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

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

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

从npm安装它

npm install @tailwindcss/line-clamp

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

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

要使用它，只需将其作为类添加即可。线夹-1 & quot；

这是文件

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

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

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

让我来分享一下我的经历，也许能帮助其他人避免这种挫败感。在我的例子中，内置的截断标志起作用了，代码如下所示:

<div  class="flex flex-row flex-shrink items-center gap-1 text-base font-medium whitespace-nowrap">
    <img class="w-5 h-4 flex-shrink-0"></img>
    <p class="truncate">
        Any potentially long long line here
    </p>
</div>

& ltimg & gt标签包含一个图标，我在这里省略了它。我注意到顺风文档中的所有例子都使用& ltp & gt标记并没有明确指出段落& ltp & gt标签对于truncate的工作是绝对必要的，但是这里的情况似乎就是这样。

也请注意，没有必要设置固定宽度或指定最小或最大宽度或指定块显示。但是有时父元素需要根据层次结构中更高的其他元素的结构来指定w-full。

希望有帮助。