问题
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).
How do I force word wrap off?
回答1:
You need to use the CSS white-space attribute.
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.
回答2:
Added webkit specific values missing from above
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:
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/
回答4:
This worked for me to stop silly work breaks from happening within Chrome textareas
word-break: keep-all;
来源：https://stackoverflow.com/questions/4652654/how-to-turn-off-word-wrapping-in-html