CODEWITHSUNDEEP
htmlcsstailwind-css
caravana_942
caravana_942

Reputation: 671

Tailwind Flex: Overflow when a long line of text is shown

This is a very strange behavior I'm getting from Flex classes in tailwind. I guess you can somehow translate it to CSS but I want to stay in a tailwind solution. Let me explain:

If you run the following code snippet, you will see that in the first case, the line overflows, even if I try with the break-words class. That doesn't happen with break-all class, but I don't wan't to use that class as it could breaks words.

When you output some normal text, it behaves as you expect.

Is this an issue? Am I being perfectionist?

Thanks!

<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">

<!-- My problem. It should break the line and avoid the overflow-->
<div class="flex bg-gray-200">
  <div class="flex-initial text-gray-700 text-center bg-gray-400 px-4 py-2 m-2">
    Short
  </div>
  <div class="flex-initial text-gray-700 text-center bg-gray-400 px-4 py-2 m-2 break-words">
    asuperultraloooooooooonglineoftexoverhereitfeelslikeitdoesnotendddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd
  </div>
</div>

<!-- When words are smaller it behaves just fine! -->
<div class="flex bg-gray-200">
  <div class="flex-initial text-gray-700 text-center bg-gray-400 px-4 py-2 m-2">
    Short
  </div>
  <div class="flex-initial text-gray-700 text-center bg-gray-400 px-4 py-2 m-2 break-words">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui ad labore ipsam, aut rem quo repellat esse tempore id, quidem
  </div>
</div>

Upvotes: 3

Views: 2437

Answers (1)

chojnicki
chojnicki

Reputation: 3623

Couple ways to fix this

Add also overflow: hidden

<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">

<!-- My problem. It should break the line and avoid the overflow-->
<div class="flex bg-gray-200">
  <div class="flex-initial text-gray-700 text-center bg-gray-400 px-4 py-2 m-2">
    Short
  </div>
  <div class="flex-initial text-gray-700 text-center bg-gray-400 px-4 py-2 m-2 break-words overflow-hidden">
    asuperultraloooooooooonglineoftexoverhereitfeelslikeitdoesnotendddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd
  </div>
</div>

<!-- When words are smaller it behaves just fine! -->
<div class="flex bg-gray-200">
  <div class="flex-initial text-gray-700 text-center bg-gray-400 px-4 py-2 m-2">
    Short
  </div>
  <div class="flex-initial text-gray-700 text-center bg-gray-400 px-4 py-2 m-2 break-words">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui ad labore ipsam, aut rem quo repellat esse tempore id, quidem
  </div>
</div>

Set static width

<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">

<!-- My problem. It should break the line and avoid the overflow-->
<div class="flex bg-gray-200">
  <div class="flex-initial text-gray-700 text-center bg-gray-400 px-4 py-2 m-2">
    Short
  </div>
  <div class="w-64 flex-initial text-gray-700 text-center bg-gray-400 px-4 py-2 m-2 break-words">
    asuperultraloooooooooonglineoftexoverhereitfeelslikeitdoesnotendddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd
  </div>
</div>

<!-- When words are smaller it behaves just fine! -->
<div class="flex bg-gray-200">
  <div class="flex-initial text-gray-700 text-center bg-gray-400 px-4 py-2 m-2">
    Short
  </div>
  <div class="flex-initial text-gray-700 text-center bg-gray-400 px-4 py-2 m-2 break-words">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui ad labore ipsam, aut rem quo repellat esse tempore id, quidem
  </div>
</div>

I'm trying to find another ways as well but to be honest I'm not 100% sure why this is happening - I'm not flexbox expert.

Upvotes: 1

Related Questions