Tailwind Flex：当显示一行很长的文本时出现溢出

Question

在tailwind中，我遇到了Flex类的一个非常奇怪的行为。我猜你可以将其转换为CSS，但我想保持在tailwind解决方案中。让我解释一下：

如果您运行以下代码片段，则会发现在第一种情况下，即使我尝试使用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>

- caravana_942

---

我也有强迫症。这些东西会让我发疯。 - m4n0

@ManojKumar 哈哈，这不是强迫症的问题。它感觉像一个玩具，有些用户可能会认为他们已经损坏了应用程序。 - caravana_942

Answer 1

一些修复方法：

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

设置静态宽度

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

我也在尝试其他方法，但是说实话，我不完全确定为什么会发生这种情况-我不是flexbox专家。

- chojnicki