Question

我觉得无法解决这个问题很愚蠢，但是如何关闭wordwrap呢？可以使用word-wrap强制使用css break-word属性，但不能强制关闭（只能单独使用normal值。）

如何强制自动换行？

Answer 1

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

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

Answer 2

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

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

Answer 3

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

word-break: keep-all;

Answer 4

如果您只需要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>

Answer 5

我想知道为什么你会找到＆＃34; white-space＆＃34;与＆＃34; nowrap＆＃34;或＆＃34; pre＆＃34;，它没有做正确的行为：你强制你的文字在一行！文本应该断行，但不会破坏单词作为默认值。这是由一些css属性引起的：自动换行，溢出换行，分词和连字符。所以你可以有：

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

因此，解决方案是删除它们，或者使用＆＃34; unset＆＃34;覆盖它们。或＆＃34;正常＆＃34;：

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/

Answer 6

white-space: nowrap;：将不会中断文本，将保留其他默认设置

white-space: pre;：将不会中断文本，将多个空格作为一个空格接一个地保留，如果明确写为break（按html等），则会中断。

如何在HTML中关闭自动换行？

6 个答案: