<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;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.