0

I have the following problem with Tailwind CSS and the truncate helper.

The code for the following image:

enter image description here

    <div class="w-full flex items-center flex-wrap gap-y-2">

      <!-- The problem is here. This is correctly cut if longer than max-w-xs, -->
      <!-- but the shortest words get cut even tho they have space to grow. -->
      <h1 class="mr-auto max-w-xs truncate font-semibold text-2xl text-gray-800 leading-tight md:mr-6">
        Audience
      </h1>

      <!-- Middle nav div -->
      <div class="mr-auto">
        ... nav here
      </div>

      <!-- Right side buttons -->
      <div class="flex flex-wrap">
        ... buttons
      </div>
    
    </div>

Removing the flex class from the parent fixes the truncate issue, but I obviously need the flex to put the 3 elements inline and wrap in smaller screens.

Any ideas? Thanks!

2
  • 1
    If you remove the truncate all together does that help? Oct 24, 2022 at 19:19
  • If I remove the truncate, short strings like "Audience" work correctly, but then, the long ones (that's why the truncate is there) span into multiple lines when they should do text ellipsis at the max width. But thanks, you gave me the idea to try the line-clamp-1 plugin and I think it might work.
    – Ricki
    Oct 25, 2022 at 5:34

1 Answer 1

1

I tested this on my system and the Audience doesn't get truncated. Maybe you have a flex or grid above this one that's effecting it?

<div class="w-full flex items-center flex-wrap gap-y-2">
<h1 class="mr-auto max-w-xs truncate font-semibold text-2xl text-gray-800 leading-tight md:mr-6">Audience</h1>
<div class="mr-auto">... nav here</div>
<div class="flex flex-wrap">... buttons</div>
</div>
1
  • 1
    Not sure why you can't reproduce the issue. Maybe because I have more content inside the other divs that's pushing the first one to left? But not to worry for now I've used the line-clamp-n plugin for now and seems to do the trick!
    – Ricki
    Oct 25, 2022 at 5:37

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.