articles

Home / DeveloperSection / Articles / Word wrap and word break using CSS3

Word wrap and word break using CSS3

Vijay Shukla 8835 16-Dec-2012

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 wrap and word break using CSS3

 

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. 

Output:


Word wrap and word break using CSS3


Updated 07-Sep-2019

Leave Comment

Comments

Liked By