Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to disable word breaking in CSS?

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.

like image 533
Dims Avatar asked Apr 15 '15 12:04

Dims


2 Answers

word-break: keep-all; will keep words whole.

like image 199
Gready Avatar answered Nov 07 '22 21:11

Gready


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/

like image 38
zod Avatar answered Nov 07 '22 22:11

zod