CODEWITHSUNDEEP
htmlcssword-wrap
Dims
Dims

Reputation: 50989

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.

Upvotes: 7

Views: 28440

Answers (5)

Carter Medlin
Carter Medlin

Reputation: 12465

You want...

white-space: break-spaces;

Upvotes: 0

David Martins
David Martins

Reputation: 2056

I don't know if this is useful in your scenario but it sure will stop a word from braking: white-space: nowrap;

Upvotes: 2

zod
zod

Reputation: 487

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/

Upvotes: 3

Gready
Gready

Reputation: 1164

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

Upvotes: 17

Cagatay Ulubay
Cagatay Ulubay

Reputation: 2559

Do you mean:

.word {
    word-wrap: break-word;
}

Source: http://www.w3schools.com/cssref/tryit.asp?filename=trycss3_word-wrap

Upvotes: -2

Related Questions