CSS word-break gives error

Question

.word-break {
    -ms-word-break: break-all;
    word-break: break-all;
    word-break: break-word;
    -webkit-hyphens: auto;
    -moz-hyphens: auto;
    hyphens: auto;
    white-space: pre-line;
}

Source : CSS-TRICKS

I have used above for word break.But it's giving below mentioned error.

Note : My Editor is VS 2013

So how can I get rid of the above error ? Any help would be highly appreciated.

Answer 1

You get rid of the error message in a browser’s console by removing the declaration word-break: break-word;. This declaration, in addition to being invalid according to CSS Text Module Level 3 LC, is actively harmful. Ignored by most browsers, it appears to be recognized by Chrome, presumably so that break-word is taken the same as or similar to the initial value normal, overriding the preceding declaration.

Note that the hyphens declarations in this rule have no effect under any normal circumstances. The word-break: break-all declaration tells the browser that it may break arbitraril y anywhere, so it has no reason to try any hyphenatio n.

Answer 2

The value break-word is invalid for the word-break property.

I think that what you are looking for is the break-word value for the word-wrap property

Please refer to this for more details

Your CSS must look like this:

.word-break {
    -ms-word-break: break-all;
    word-break: break-all;
    word-wrap: break-word;
    -webkit-hyphens: auto;
    -moz-hyphens: auto;
    hyphens: auto;
    white-space: pre-line;
}

Answer 3

you are using a wrong value that is why you get the error, word-break property only have the following values :)

word-break: normal|break-all|keep-all|initial|inherit;

normal is the Default value. Break words according to their usual rules