CSS3 Tutorial: word-wrap

Word wrap

word-wrap

With the word-wrap CSS property, it is possible to break a sentences in the middle of a word in order to prevent overflow with respect to the containing box

Syntax: normal | break-word

Examples

word-wrap: normal
word-wrap: break-word
word-wrap: inherit

Example1: with and without word-wrap

Word wrap
Image 1. Word wrapping is only applied in the left layer.

The CSS

div.containerWordWrap{
    word-wrap: break-word;
}
div.containerNoWordWrap{
    word-wrap: normal;
}

The HTML

<div class="containerWordWrap ">
    <h2>Loremipsumdolorsitamet</h2>
    <p>Lorem ipsum dolor sitamet, consectetur  <a href="#">http://www.somearbitrarylink.com</a>, totamremaperiameaquipsaquaeab. </p>
</div>
<div class="containerNoWordWrap">
    <h2>Loremipsumdolorsitamet</h2>
    <p>Lorem ipsum dolor sit amet, consectetur  <a href="#">http://www.somearbitrarylink.com</a>, totamremaperiameaquipsaquaeab.</p>
</div>

Check this example in your browser

Leave a comment