In this article I am going to explain how to create a word wrap and word break using CSS3.
Word wrap
If a word is too long to fit within an area, so use the word wrap property in the CSS. The word-wrap property allows you to force the text to wrap.
<!DOCTYPE html>
<html>
<head>
<style>
p.wordwrap
{
word-wrap:break-word;
width:11em;
border:1px solid;
border-color:#CD853F;
font-weight:bold;
color:#CD853F;
}
</style>
</head>
<body>
<p class="wordwrap"> MindStick is a Microsoft ISV Gold certified software development company specializing in product development, programming and consulting services.
Currently we have three software products named MindStick Cleaner and MindStick DataConverter, MindStick SurveyManager which are available free of cost.
Thnxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx...!!!!!!!!!!!!!!!
</p>
</body>
</html>
Word-wrap: break-word:
This property is allowing long words to be able to break and wrap onto the next line.
Output:
Word break
This property is breaking the word of when this word size is greater than its area.
<!DOCTYPE html>
<html>
<head>
<style>
p.wordwrap
{
word-break:break-all;
width:11em;
border:1px solid;
border-color:#CD853F;
font-weight:bold;
color:#CD853F;
}
</style>
</head>
<body>
<p class="wordwrap"> MindStick is a Microsoft ISV Gold certified software development company specializing in product development, programming and consulting services.
Currently we have three software products named MindStick Cleaner and MindStick DataConverter, MindStick SurveyManager which are available free of cost.
Thnxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx...!!!!!!!!!!!!!!!
</p>
</body>
</html>
Word-break: break-all
Lines may break between any two characters.
Leave Comment