CSS Word Wrap, TutorialsPoint, CSS Word Wrap Tutorial

CSS Word Wrap

CSS word wrap property is used to break the long words and wrap onto the next line. This property is used to prevent overflow when an unbreakable string is too long to fit in the containing box.

CSS Word Wrap Values

Value	Description
normal	This property is used to break words only at allowed break points.
break-word	It is used to break unbreakable words.
initial	It is used to set this property to its default value.
inherit	It inherits this property from its parent element.

Example :

<!DOCTYPE html>  
<html>  
<head>  
<title>CSS Word Wrap</title>
 
<style type="text/css">   
.word_wrap {  
width: 200px;  
background-color: #F90; 
border: 1px solid #000000; 
color:#FFF;  
padding:10px; 
word-wrap: break-word; 
}  
</style>  
</head> 
 
<body>  
 
<p class="word_wrap"> 
Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, 
when an unknown printer took a galley of type and scrambled it to make a type specimen book.
</p>
  
</body>  
</html>

Output :

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.

CSS Tutorial