Tailwind Flex：显示长行文本时溢出

Posted 2023-03-07

【中文标题】Tailwind Flex：显示长行文本时溢出

【英文标题】：Tailwind Flex: Overflow when a long line of text is shown

【发布时间】：2020-08-20 15:07:37

【问题描述】：

这是我从顺风的 Flex 类中得到的一个非常奇怪的行为。我想您可以以某种方式将其转换为 CSS，但我想留在顺风解决方案中。让我解释一下：

如果您运行以下代码 sn-p，您将看到在第一种情况下，行溢出，即使我尝试使用 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>

【问题讨论】：

我也有强迫症。像这样的事情让我发疯。

@ManojKumar 哈哈，这与强迫症无关。感觉就像一个玩具，有些用户可能会认为他们破坏了应用程序。

【参考方案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 专家。