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

517

我无法解决这个问题，感到很傻，但是我该如何关闭自动换行功能呢？css word-wrap属性可以通过强制启用break-word，但不能强制关闭（只能与normalvalue 一起保留）。

如何强制自动换行？

html css word-wrap

— 亚历山大·伯德
source

852

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

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

— 乔恩
source

25

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

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

— 马塔斯·维特凯维奇乌斯（Matas Vaitkevicius）
source

3

我不知道您为什么找到带有“ nowrap”或“ pre”的“空白”作为解决方案，却没有正确地进行操作：您将文本放在一行中！文本应使用换行符，但默认情况下不得断行。这是由某些CSS属性引起的：自动换行，溢出自动换行，断字和连字符。因此，您可以：

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/

— 佐德
source

1

我了解您为什么总想打破措辞。但是假设没有充分的理由进行自动换行对我来说是没有意义的。我迅速尝试测试您的“未设置”解决方案，但该解决方案仍然具有自动换行功能。如果您认为它应该起作用，请提供一个jsfiddle演示来使其起作用。

— 亚历山大·伯德

我不知道为什么我的回复消失了。同样，您可以强制使用nowrap，通常人们是为按钮操作的。但是出于响应性原因，我认为这是一个糟糕的设计，因为文本可能会超出容器的范围。无论如何，问题是关于自动换行：断词，被强制打开，而您正在询问如何强制关闭。因此，我提供了执行此操作的代码。whitespace：nowrap是另一回事，它不是删除断句，而是删除整行。我还提供了与JSfiddle的代码比较：https

— //jsfiddle.net/azozp8rr/

2

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

word-break: keep-all;

— 瑞安·查姆利（Ryan Charmley）
source