617

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?

3
  • 3
    "I feel silly for not being able to figure this out" gets 587 upvotes and counting. Jul 26, 2022 at 19:57
  • for me work white-space: nowrap. white-space: pre is bad show multiple words with mix short and long words.
    – romanown
    Mar 12 at 22:32
  • I use this so infrequently that I came here to remind myself of the correct answer. There is no shame in forgetting something that you seldom use. This time, I encoded it into a very fine-grained CSS selector that applies just this one attribute for nowrap, probably by far the most common use of the white-space attribute. Jul 15 at 6:08

6 Answers 6

1004

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.

0
32

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 */
14

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/

2
  • 1
    I understand why you want to break on words in general. But to assume there's no valid reason to turn of word wrap doesn't make sense to me. I quickly tried testing your "unset" solution, and it still had word wrapping. If you think it should work, please provide a jsfiddle demo'ing it working. May 14, 2018 at 20:46
  • I don't know why my reply vanished. Again, you can force nowrap, usually people do it for buttons. But i think it is a bad design for responsive reasons, because texts could go outside the container. Anyway, the question was asking about word-wrap:break-word, forced on, and you was asking how to force off. So, i provided the code to do it. The whitespace:nowrap is another thing, and it is not removing breaking words, it is removing breaking whole lines. Also i provide comparison of the code with JSfiddle: https://jsfiddle.net/azozp8rr/
    – zod
    May 16, 2018 at 12:56
11

white-space: nowrap;: Will never break text, everything else is the same

white-space: pre;: Will never break text, will keep multiple spaces after one another as multiple spaces, will break only explicitly with a newline

1
  • 1
    Wrong. pre does wrap while also keeping multiple spaces.
    – ArekBulski
    May 10, 2021 at 21:50
5

This worked for me to stop silly work breaks from happening within Chrome textareas

word-break: keep-all;
2

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>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.