<div>
<code>Normal</code>
<p>Ut enim ad minim veniam, quis nostrudnostrud nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequatconsequatconsequatconsequat.</p>
</div>
<div class="word-break">
<code>word-break</code>
<p>Ut enim ad minim veniam, quis nostrudnostrud nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequatconsequatconsequatconsequat.</p>
</div>
<div class="word-wrap">
<code>word-wrap</code>
<p>Ut enim ad minim veniam, quis nostrudnostrud nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequatconsequatconsequatconsequat.</p>
</div>
div {
width: 7em;
background-color: #eee;
color: #222;
font-family: sans-serif;
margin-right: 1.5em;
float: left;
padding: 6px;
font-size: 19px;
margin-left: 15%;
margin-bottom: 20px;
}
code {
text-align: center;
display: block;
color: #000;
}
.word-break {
word-break: break-all;
}
.word-wrap {
word-wrap: break-word;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.