How to set text overflow properties in tailwind for 2 divs?

September 13, 2023

I am trying to truncate text when viewed on smaller screens(responsive), but unable to achieve so using truncate or text-ellipsis.

<div class="max-w-xs truncate font-bold">{EmployeeName},</div>
<div class="truncate font-normal">{LocationName}</div>

I have tried by setting overflow-hidden and setting width w-40 or max-w-xs but still cannot get it to work

Full Code:

<div class="bg-black text-white">
  <div class="container mx-auto px-6 py-3">
    <div class="container mx-auto flow-root items-center justify-between">
      <div class="float-left mb-1 flex text-3xl">
        <div class="max-w-xs truncate font-bold">{EmployeeName},</div> <!----------------- HERE-->
        <div class="truncate font-normal">{LocationName}</div><!-------------------------- HERE-->
      </div>
      <button class="mx-3 mt-1 min-w-[5rem] rounded-lg bg-green-400 px-1 py-1.5 text-center text-xs text-yellow-50">Details</button>
      <div class="float-right py-2">
        <div class="flex flex-col items-end">
          <div class="flex flex-row">
            <button class="mx-2 h-6 w-6">Info</button>
            <select id="timerange" class="block w-full text-black">
              <option selected>Choose timerange</option>
              <option value="sixm">6 months</option>
              <option value="twelvem">12 months</option>
              <option value="twentyfourm">24 months</option>
            </select>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

You can play with full code here:
Tailwind Play

>Solution :

Consider setting the maximum width of the parent element of the names such that it will not overflow via max-width: 100% via max-w-full.

Then, apply min-width: 0 to the name elements so that this overrides the implicit min-width: min-content on horizontal flex layout child items, so that they can shrink below the word lengths:

<script src="https://cdn.tailwindcss.com/3.3.3"></script>

<div class="bg-black text-white">
  <div class="container mx-auto px-6 py-3">
    <div class="container mx-auto flow-root items-center justify-between">
      <div class="float-left mb-1 flex text-3xl max-w-full">
        <div class="truncate font-bold min-w-0">LongLongLongLongEmployeeName,</div><!----------------- HERE-->
        <div class="truncate font-normal min-w-0">LongLongLongLongLocationName</div><!----------------- HERE-->
      </div>
      <button class="mx-3 mt-1 min-w-[5rem] rounded-lg bg-blue-400 px-1 py-1.5 text-center text-xs text-yellow-50">Details</button>
      <div class="float-right py-2">
        <div class="flex flex-col items-end">
          <div class="flex flex-row">
            <button class="mx-2 h-6 w-6">Info</button>
            <select id="timerange" class="block w-full text-black">
              <option selected>Choose timerange</option>
              <option value="sixm">6 months</option>
              <option value="twelvem">12 months</option>
              <option value="twentyfourm">24 months</option>
            </select>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>