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?
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.
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/
If you want a HTML only solution, we can just use the pre
tag. It defines "preformatted text" which means that it does not format word-wrapping. Here is a quick example to explain:
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>