如何关闭 HTML 中的自动换行？答案

【问题标题】：How to turn off word wrapping in HTML?如何关闭 HTML 中的自动换行？
【发布时间】：2011-06-06 20:42:23
【问题描述】：

无法弄清楚这一点我觉得很傻，但是我该如何关闭自动换行呢？ css word-wrap 属性可以用break-word 强制打开，但不能强制关闭（只能单独使用normal 值）。

如何强制自动换行关闭？

【问题讨论】：

标签： html css word-wrap

【解决方案1】：

您需要使用 CSS white-space 属性。

特别是white-space: nowrap 和white-space: pre 是最常用的值。第一个似乎是你所追求的。

【讨论】：

【解决方案2】：

添加了上面缺少的 webkit 特定值

white-space: -moz-pre-wrap; /* Firefox */
white-space: -o-pre-wrap; /* Opera */
white-space: pre-wrap; /* Chrome */
word-wrap: break-word; /* IE */

【讨论】：

【解决方案3】：

我想知道为什么您会找到带有“nowrap”或“pre”的“空白”作为解决方案，它的行为不正确：您将文本强制放在一行中！文本应该换行，但默认情况下不应该换行。这是由一些 css 属性引起的：word-wrap、overflow-wrap、word-break 和连字符。所以你可以有：

word-break: break-all;
word-wrap: break-word;
overflow-wrap: break-word;
-webkit-hyphens: auto;
-moz-hyphens: auto;
-ms-hyphens: auto;
hyphens: auto;

所以解决方案是删除它们，或者用“未设置”或“正常”覆盖它们：

word-break: unset;
word-wrap: unset;
overflow-wrap: unset;
-webkit-hyphens: unset;
-moz-hyphens: unset;
-ms-hyphens: unset;
hyphens: unset;

更新：我还提供了 JSfiddle 的证明：https://jsfiddle.net/azozp8rr/

【讨论】：

我理解你为什么要断句。但是假设没有正当的理由来换行对我来说没有意义。我很快尝试测试您的“未设置”解决方案，它仍然有自动换行。如果你认为它应该工作，请提供一个 jsfiddle 演示它工作。
我不知道为什么我的回复消失了。同样，您可以强制 nowrap，通常人们会为按钮执行此操作。但我认为出于响应原因，这是一个糟糕的设计，因为文本可能会超出容器。无论如何，问题是关于 word-wrap:break-word，forced on，而你在问如何强制关闭。所以，我提供了代码来做到这一点。 whitespace:nowrap 是另一回事，它不是删除破坏性的单词，而是删除破坏性的整行。我还提供了与 JSfiddle 的代码比较：https://jsfiddle.net/azozp8rr/

【解决方案4】：

这对我来说可以阻止在 Chrome 文本区域中发生愚蠢的工作中断

word-break: keep-all;

【讨论】：

【解决方案5】：

如果您想要纯 HTML 解决方案，我们可以使用 pre 标记。它定义了“预格式化文本”，这意味着它不格式化自动换行。下面是一个简单的例子来解释：

div {
    width: 200px;
    height: 200px;
    padding: 20px;
    background: #adf;
}
pre {
    width: 200px;
    height: 200px;
    padding: 20px;
    font: inherit;
    background: #fda;
}

<div>Look at this, this text is very neat, isn't it? But it's not quite what we want, though, is it? This text shouldn't be here! It should be all the way over there! What can we do?</div>
<pre>The pre tag has come to the rescue! Yay! However, we apologise in advance for any horizontal scrollbars that may be caused. If you need support, please raise a support ticket.</pre>

【讨论】：

【解决方案6】：

white-space: nowrap;: 永远不会破坏文本，将保持其他默认值

white-space: pre;: 永远不会打断文本，将多个空格一个接一个地保留为多个空格，如果显式写入 break（在 html 中按 enter 等）会打断

【讨论】：

错了。 pre 确实会换行，同时还保留多个空格。