CODEWITHSUNDEEP
htmlcssword-wrap
Alexander Bird
Alexander Bird

Reputation: 40599

How to turn off word wrapping in 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).

How do I force word wrap off?

Upvotes: 637

Views: 488742

Answers (7)

user26773773
user26773773

Reputation: 11

What worked for me was white-space: nowrap on the top container. Then I set the content to max-content to have the boundary be the length of the content.

Upvotes: 1

Gabriel Petersson
Gabriel Petersson

Reputation: 10412

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

Upvotes: 16

corn on the cob
corn on the cob

Reputation: 2282

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>

Upvotes: 2

Ryan Charmley
Ryan Charmley

Reputation: 1127

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

word-break: keep-all;

Upvotes: 5

zod
zod

Reputation: 487

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/

Upvotes: 16

Matas Vaitkevicius
Matas Vaitkevicius

Reputation: 61361

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

Upvotes: 32

Jon
Jon

Reputation: 437326

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.

Upvotes: 1025

Related Questions