/    /  word-break property

word-break property

 

This property is used to specify how words should break when reaching the end of a line. Using this property, the lines that don’t fit in the content box will break at a certain point.

 

Syntax:

 

word-break:    normal | break-all | keep-all | initial | inherit

 

Property Values:

 

  • normal Words break according to their usual rules.
  • break-all Lines may break between any two letters.
  • keep-all Breaks are prohibited between pairs of letters.
  • initial Sets this property to its default value.
  • inherit The property from its parent element.

 

Example:

 

<!DOCTYPE html>
<html>
<head>
<style>
p{
width: 350px;
border: 2px solid #663300;
text-align: left;
font-size: 20px;
color: #ff99ff;
}
.break{
word-break: break-all;
}
.keep{
word-break: keep-all;
}
</style>
</head>
<center>
<body>
<h2>word-break: break-all;</h2>
<p class="break">
Hi, Welcome to I2Tutorials. Enter content here.Enter content here.Enter content here.Enter content here.Enter content here.Enter content here.Enter content here.Enter content here.Enter content here.Enter content here.
</p>
<h2>word-break: keep-all;</h2>
<p class="keep">
Hi, Welcome to I2Tutorials. Enter content here.Enter content here.Enter content here.Enter content here.Enter content here.Enter content here.Enter content here.Enter content here.Enter content here.Enter content here.
</p>
</center>
</body>
</html>

 

OUTPUT:

 

word-break property