线夹元素太宽

Question

我正在使用@tailwindcss/line-clamp插件将文本元素 ( <span> ) 夹在一行 ( line-clamp-1) 。 文本元素位于弹性框内，后面跟着另一个应该“粘”在其右侧的文本元素。

我的问题是没有正确计算被钳位的文本元素的宽度。 即使文本被正确夹住，元素的宽度仍然太宽，并且以下文本不会像我想要的那样“粘”得很紧。

下面是一个截图。 “问题元素”是说“人机交互”的元素。 它应该看起来像其他人一样，括号中的“帖子计数”与主题 label 密切相关。

这是我的代码：

{{#foreach tags}}
    <a class="flex flex-row gap-1" href="{{url}}">
        <span class="text-neutral-200 line-clamp-1"> {{name}}</span>
        <span class="text-neutral-500"> ({{count.posts}})</span>
    </a>
{{/foreach}}

如何减小钳制文本元素的宽度以适应内部钳制文本？

PS我尝试用<p>元素替换<span> s，并使用其他不涉及 line-clamp 插件的 CSS 方法，到目前为止还没有找到解决方案。

Answer 1

没有必要使用额外的 package 因为你只有一个行，为了实现你可以使用带有white-space和overflow的text-overflow属性来获得相同的结果。

您可以将其用作内联或使用 @layer 创建您自己的class 。

 <script src="https://cdn.tailwindcss.com"></script> <style type="text/tailwindcss"> @layer utilities {.ellip { @apply overflow-hidden text-ellipsis whitespace-nowrap; } } </style> <div class="grid grid-cols-4 gap-6 bg-black"> <div class="flex flex-col"> <a class="flex flex-row gap-1" href="/#"> <span class="overflow-hidden text-ellipsis whitespace-nowrap text-neutral-200"> Music</span> <span class="text-neutral-500"> (7)</span> </a> <a class="flex flex-row gap-1" href="/#"> <span class="overflow-hidden text-ellipsis whitespace-nowrap text-neutral-200"> Architecture</span> <span class="text-neutral-500"> (2)</span> </a> <a class="flex flex-row gap-1" href="/#"> <span class="overflow-hidden text-ellipsis whitespace-nowrap text-neutral-200"> Graphic Design</span> <span class="text-neutral-500"> (10)</span> </a> <a class="flex flex-row gap-1" href="/#"> <span class="overflow-hidden text-ellipsis whitespace-nowrap text-neutral-200"> Human-Computer Interaction </span> <span class="text-neutral-500"> (5)</span> </a> </div> <div class="flex flex-col"> <a class="flex flex-row gap-1" href="/#"> <span class="text-neutral-200 ellip"> Human-Computer Interaction</span> <span class="text-neutral-500"> (7)</span> </a> <a class="flex flex-row gap-1" href="/#"> <span class="text-neutral-200"> Art</span> <span class="text-neutral-500"> (4)</span> </a> <a class="flex flex-row gap-1" href="/#"> <span class="text-neutral-200 ellip"> Education</span> <span class="text-neutral-500"> (5)</span> </a> <a class="flex flex-row gap-1" href="/#"> <span class="text-neutral-200 ellip"> Graphic Design</span> <span class="text-neutral-500"> (10)</span> </a> </div> </div>