Word Wrap with CSS3 example

Word Wrap with CSS3 example

When you are working on a website you may have the problem that the text is too long and does not fit to the area and it expands outside of the area. In CSS3 the word-wrap property allows us breaking and wrapping the long words on to the next line.

Simple the word-wrap property in CSS3 forces the text to wrap even if the expanding part is in the middle of the word. word-wrap property is supported by all of the major browsers. It has to values: normal and break-word

Property value normal is for breaking the words only at allowed break points and the property value break-word allows un-breakable very long words to be broken.


CSS3 word-wrap Sample

CSS
h3.red {color:red;}
h3.green {color:green;}
.nowrap{
float:left; border:1px solid red; width:300px; max-height:300px; margin:15px; padding:
10px;
}
.withwrap{
word-wrap:break-word; float:left; border:1px solid red; width:300px; maxheight:
300px; margin:15px; padding:10px;
}

 


HTML

<div class="nowrap">
<h3 class="red">Without Word Wrap</h3>
This is the simple text to show how the word-wrap property in CSS3 is working. below
is a long word and <strong>we did not use word wrap</strong> it is expanding
outside of the area and wrapping:
<br />
safl─▒asjaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
</div>
<div style="clear:both;"></div>
<div class="withwrap">
<h3 class="green">With Word Wrap</h3>


This is the simple text to show how the word-wrap property in CSS3 is working. below is a long word but hence <strong>we use word wrap</strong> it is not expanding
outside of the area and wrapping:


<br />
safl─▒asjaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
</div>

Joomla Templates
Popup now! Make a Difference!