How to wrap text using CSS. Word-wrap is a property that offers the content clear for the users. In addition, it has a feature that will break the text in such a way that they do not cross the boundary of the box fixed. The CSS Word Wrap property was adjusted from the feature of the same name offered by Microsoft, wherein, rather than addressing the user to scroll horizontally, to see the entire sentence, the sentence is broken into parts, to fit the window. The word-wrap property was next renamed to overflow-wrap but is still used as an alias.
Read Also: Create a button using CSS
overflow-wrap: normal| break-word;
Example of CSS Un-wrap text
<h2>This for overflow-wrap</h2>
<div class="textwrap1">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. This is a bigest word</div>
<style type="text/css">
.textwrap1{
width: 200px;
margin: 20px;
background: cyan;
box-shadow: 4px 4px 4px #000, -4px -4px 4px;
border: 5px solid #eee;;
overflow-wrap:normal;
}</style>In case of the property overflow-wrap. If we use the parameter value as normal overflow: normal; then, it will make the string of words break at a normal point of departure, like a full stop (.) or comma (,) separator.
Read Also: Blink text in css
Example of CSS Wrap text
<h2>How to wrap text using CSS</h2>
<div class="textwrap2">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua.</div>
<style type="text/css">
.textwrap2{
width: 200px;
margin: 20px;
background: cyan;
box-shadow: 4px 4px 4px #000, -4px -4px 4px;
border: 5px solid #eee;
overflow-wrap: break-word;
}
</style>In case we are using word-break, overflow: break-word; It will break the text fully. This property can be put to excellent use if we have various containers on a page.
Have a nice day.