How to disable breaking words into parts when wrapping lines in CSS? For example, currently, if it has no space, it writes word "impossible" in the following way:
I think it is not im-
possible
i would like it write
I think it is not
impossible
i.e. wrap entire word "impossible" to next line, not only part of it.
I don't wish to change text alignment.
UPDATE
The answer proposed here: Stop word-wrap dividing words look irrational or tricky, because white-space
property has no possible value of wrap
, described here http://www.w3schools.com/cssref/pr_text_white-space.asp
Also, the overall topic of white-space
is different and described as "specifies how white-space inside an element is handled" (see link above).
So, I can't regard the answer about white-space
as correct and/or duplicate.
word-break: keep-all;
will keep words whole.
I consider wrong solution the "white-space" with "nowrap" or "pre" too, it is not doing the correct behaviour. The text should break lines, but not break words. This is caused by some css attributes: word-wrap, overflow-wrap, word-break, 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;
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;
JSfiddle provided: https://jsfiddle.net/azozp8rr/
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With