How to turn off word wrapping in HTML?

html css word-wrap

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?

Jon

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.

Matas Vaitkevicius

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

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:

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/

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.

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/

Gabriel Petersson

white-space: nowrap;: Will never break text, will keep other defaults

white-space: pre;: Will never break text, will keep multiple spaces after one another as multiple spaces, will break if explicitly written to break(pressing enter in html etc)

Wrong. pre does wrap while also keeping multiple spaces.

Ryan Charmley

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

word-break: keep-all;

corn on the cob

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; }

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?

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.

How to turn off word wrapping in HTML?

Follow WeChat

Want to stay one step ahead of the latest teleworks?

相似问题

Platform

Support

Contact US