Sampath
Sampath

Reputation: 65860

CSS word-break gives error

.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

enter image description here

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

Upvotes: 2

Views: 4104

Answers (3)

Jukka K. Korpela
Jukka K. Korpela

Reputation: 201518

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.

Upvotes: 4

Muhammad
Muhammad

Reputation: 7324

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

Upvotes: 1

Cirou
Cirou

Reputation: 1430

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

Upvotes: 1

Related Questions