Element with line-clamp too wide

Question

I am using the @tailwindcss/line-clamp plugin to clamp a text element () 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.

Here is my code:

{{#foreach tags}}
    
         {{name}}
         ({{count.posts}})
    
{{/foreach}}

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

P.S. I have tried replacing s with

elements, and using other CSS approaches that don't involve the line-clamp plugin, and have not found a solution so far.

user_15545116 · Answer

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.






  
    
       Music
       (7)
    
    
       Architecture
       (2)
    
    
       Graphic Design
       (10)
    
    
       Human-Computer Interaction 
       (5)
    
  
  
    
       Human-Computer Interaction
       (7)
    
    
       Art
       (4)
    
    
       Education
       (5)
    
    
       Graphic Design
       (10)

Element with line-clamp too wide

1 Answers