CSS word wrap – 2 examples to wrap or no-wrap text

The word-wrap property

The word wrap (CSS3) property specifies whether to break a word or not if the element (like a paragraph, div etc.) has less space. Otherwise, avoid overflow of long words beyond the boundary of the containing element.

See an example of the word-wrap property

The word-wrap syntax with values

The CSS word-wrap may have two values:

Word-wrap: normal;

Word-wrap: break-word;

The normal value in the word-wrap property means words should break at normal points whereas CSS break-word will break where containing element’s boundary is ending and word will be wrapped to the next line.

As such, this is CSS3 property, it is still to be compatible with all browsers.

See demonstration below for the better idea of how to use the word-wrap property.

Example of using word-wrap property with break-word value

The example below contains text within a div element. The div element has a solid border with the specific width. One word is too long and should either overflow or break to next line. As break-word value is assigned to the word-wrap property, it will break to the next line as shown in the example:

Experience this example online

CSS no wrap example by word-wrap property

The example below uses the normal value in CSS word-wrap property. As a result, the long word (a-z) will overflow the div element. Alternatively, you can say that the text is set to no-wrap.

Experience this example online

Was this article helpful?

Related Articles

Leave A Comment?