html - 顺风 Flex : Overflow when a long line of text is shown

Question

这是我从 tailwind 中的 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>

设置静态宽度

<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 专家。