Search code examples
htmlcsstailwind-cssweb-frontend

Element with line-clamp too wide

I am using the @tailwindcss/line-clamp plugin to clamp a text element (<span>) to one line (line-clamp-1). The text element is inside a flex box, and is followed by another text element that's supposed to "stick" to its right side.

My problem is that the width of the clamped text element is not computed properly. Even though the text is clamped correctly, the width of the element remains too wide and the following text does not "stick" closely like I want to.

Below is a screenshot. The "problem element" is the one that says "Human-Computer Interaction". It should look like the others, where the "post count" in parentheses "sticks" closely to the topic label.

screenshot from my UI design showing problematic text clamping

Here is my code:

{{#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}}

How does one reduce the width of the clamped text element to fit the clamped text inside?

P.S. I have tried replacing <span>s with <p> elements, and using other CSS approaches that don't involve the line-clamp plugin, and have not found a solution so far.

Solution

  • There is no need to use an extra package because you only one have line and for achieve you can use text-overflow property with white-space and overflow to get the same result.

    You can use it as inline or create you own class with @layer.

    <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>

    Edit dazziling-code