CSS3 word-wrap Property

Here is the brief explanation on how to break long words and wrap onto the next line using the word-wrap property in css3.

Explanation

Property :

word-wrap: normal|break-word|initial|inherit;

Where,
normal - Break words only at allowed break points
break-word - Allows unbreakable words to be broken
initial - Sets this property to its default value. Read about initial
inherit - Inherits this property from its parent element.

Usage:


word-wrap: break-word;

Definition:

The CSS3 word-wrap property allows long words to be able to be broken and wrap onto the next line.
If a word is too long to fit within an area, it expands outside.The word-wrap property allows you to force the text to wrap - even if it means splitting it in the middle of a word.

Example 1:


<p style='word-wrap: break-word; width: 11em;border: 1px solid grey;'>
This paragraph contains a very long word: thisssssisssssveryyyyylonggggworddddddd. The look and feel of any site can be improved drastically by using CSS.</p>

Result:

This paragraph contains a very long word: thisssssisssssveryyyyylonggggworddddddd. The look and feel of any site can be improved drastically by using CSS.




Ask Questions

Ask Question