如何关闭HTML中的单词包装?

I feel silly for not being able to figure this out, but how do I turn off wordwrap? the css word-wrap property can be forced on with break-word, but cannot be forced off (only can be left alone with normal value).

我觉得自己没办法解决这个问题，觉得很傻，但是我该怎么关掉这个词呢?css单词-wrap属性可以使用break-word强制执行，但不能强制关闭(只能单独使用正常值)。

How do I force word wrap off?

我怎样才能让单词结束?

3 个解决方案

#1

696

You need to use the CSS white-space attribute.

您需要使用CSS空白属性。

In particular, white-space: nowrap and white-space: pre are the most commonly used values. The first one seems to be what you 're after.

特别是，空格:nowrap和空格:pre是最常用的值。第一个似乎就是你想要的。

#2

Added webkit specific values missing from above

增加了webkit特定值的缺失

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

#3

I wonder why you find as solution the "white-space" with "nowrap" or "pre", it is not doing the correct behaviour: you force your text in a single line! The text should break lines, but not break words as default. This is caused by some css attributes: word-wrap, overflow-wrap, word-break, and hyphens. So you can have either:

我想知道为什么你会发现用“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;

So the solution is remove them, or override them with "unset" or "normal":

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

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

UPDATE: i provide also proof with JSfiddle: https://jsfiddle.net/azozp8rr/

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

#1

696