换行规则很复杂。以下是所有相关的 CSS 和 HTML。

假设您在某个元素内的文本中有一个非常长的单词，而该元素的宽度不足以容纳它。这常见的一个原因是，一个很长的 URL 进入了复制内容中。会发生什么？这取决于 CSS。CSS 如何控制布局以及 CSS 如何指示文本进行处理。

这就是文本溢出情况可能的样子

文本超出框体是一个视觉问题。

一种可能性是 overflow: hidden;，这是一种有点蛮力的方式，它会阻止文本（或任何其他内容）超出边界。但是，它会使文本略微无法访问。在某些带有鼠标的桌面浏览器中，您可能能够三击该行以选择 URL 并复制它，但您不能指望每个人都知道这一点，或者它在所有情况下都是可能的。

溢出在这里也是正确的词，因为这正是正在发生的事情。我们也可以使用 overflow: auto;，这将触发一个水平滚动条。有时可能适用，但我认为我们都会同意这通常不是一个可接受的解决方案。

我们想要的是让这个很长的 URL（或任何类型的文本）换行。有一些选择！让我们从尝试解决这些问题的地方开始。

实验场地

我的想法是在这里有一个可调整大小的内容面板，以及各种 CSS 属性/值，您可以打开和关闭这些属性/值以查看它们对内容的影响。

我确定这并不全面或完美执行。它只是我了解的一些属性。

重锤：word-break: break-all;

允许单词在任何地方断开。该 word-break 属性确实“解决了”这个问题

p {
  word-break: break-all;
}

在与 fantasi 的电子邮件交流中，她解释说这是有效的，因为 word-break 属性重新定义了什么是单词。break-all 值基本上将非-CJK 视为 CJK，它几乎可以在任何地方断开（除了句点和右括号之类的东西）。keep-all 值则相反，将 CJK 视为非-CJK。

微妙的修复：`overflow-wrap: break-word;`

overflow-wrap 属性似乎是我们提出的问题的最有效解决方案

p {
  word-wrap: break-word; /* old name */
  overflow-wrap: break-word;
}

乍一看，它可能看起来与上面的 word-break: break-all; 演示非常相似，但请注意，在 URL 中，它不是在“pen”的“pe\n”处断开，而是在该单词末尾的斜杠处断开。更好。

fantasi 解释说

“如果一个单词不能断开，因此会溢出，那么它可以在任何地方断开以避免溢出。”

更强大的修复，有时：hyphens: auto;

该 hyphens 属性的作用与您预期的一样……允许在换行符处进行连字符化。连字符有时可以在 URL 和长单词中解决问题，但不能保证。例如，一个很长的数字会使它出错。此外，连字符会影响所有文本，更自由地断开单词以帮助文本均匀地贴合右侧边缘。

p {
  hyphens: auto;
}

fantasi 告诉我

如果一个“单词”跨越了行的末尾，我们可以用连字符连接它。

我想“单词”有助于指出那里的问题。一些有问题的长字符串不是“单词”，因此不能指望它解决所有溢出问题。

未来的重锤：line-break: anywhere;

有一个名为 line-break 的属性。它主要用于标点符号，显然，但我似乎无法在任何浏览器中看到它起作用。fantasi 告诉我，将会有一个名为 anywhere 的新值，它

类似于 word-break: break-all;，但它实际上像一个愚蠢的终端客户端一样断开所有内容。

其他 HTML 内容

• <br> 元素将在其渲染的任何位置换行。除非它是 display: none;！
• <wbr> 元素是一个“换行机会”，这意味着一个通常会导致烦人的溢出问题的长单词可以被告知它可以在某个点断开。有用！它的行为类似于零宽空格。

其他 CSS 内容

• ­ 字符就像 <wbr> 元素。
• 您可以通过伪元素注入换行符，例如 ::before { content: "\A"; }，只要元素不是内联元素（或者如果是，则需要 white-space: pre;）即可。