Tailwind Flex: переполнение при отображении длинной строки текста

Question

Это очень странное поведение, которое я получаю от классов Flex в попутном ветре. Я думаю, вы можете как-то перевести его в CSS, но я хочу остаться в решении для попутного ветра. Позвольте мне объяснить:

Если вы запустите следующий фрагмент кода, вы увидите, что в первом случае строка переполняется, даже если я попытаюсь использовать класс break-words. Этого не происходит с классом break-all, но я не хочу использовать этот класс, так как он может разбивать слова.

Когда вы выводите обычный текст, он ведет себя так, как вы ожидаете.

Это проблема? Я перфекционист?

Спасибо!

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

Answer 1

Пара способов исправить это

Добавьте также переполнение: скрыто

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

Установить stati c 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>

Я тоже пытаюсь найти другие способы, но, честно говоря, я не уверен на 100%, почему это происходит - я не эксперт по flexbox.