如何关闭 HTML 中的自动换行？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4652654/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to turn off word wrapping in HTML?
提问by Alexander Bird
I feel silly for not being able to figure this out, but how do I turn off wordwrap? the css word-wrapproperty can be forced on with break-word, but cannot be forced off(only can be left alone with normalvalue).
我为无法弄清楚这一点而感到愚蠢，但是我该如何关闭自动换行？cssword-wrap属性可以用 强制打开break-word，但不能强制关闭（只能单独使用normal值）。
How do I force word wrap off?
如何强制自动换行？
回答by Jon
You need to use the CSS white-spaceattribute.
您需要使用 CSSwhite-space属性。
In particular, white-space: nowrapand white-space: preare the most commonly used values. The first one seems to be what you 're after.
特别是，white-space: nowrap和white-space: pre是最常用的值。第一个似乎是你想要的。
回答by Matas Vaitkevicius
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 */
回答by zod
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-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;
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/
回答by Ryan Charmley
This worked for me to stop silly work breaks from happening within Chrome textareas
这对我有用，可以阻止 Chrome textarea 中发生愚蠢的工作中断
word-break: keep-all;
