<div class="container">
  <h2>Alignment is normal, text breaks like it normally would</h2>
  <div class="text">
    <p>
      The following text will not only break where there is a white space, but it will also break in the middle of any word that does not fit inside the line which needs to break to fits its container.
    </p>
    <p>
      The resulting effect is close to that achieved by aligning the text to justify (i.e. aligning the text to both edges of its container).
    </p>
  </div>
</div>
<div class="container">
  <h2>Alignment is normal, text breaks inside words</h2>
  <div class="text break">
    <p>
      The following text will not only break where there is a white space, but it will also <strong>break</strong> in the middle of any word that does not fit inside the line which needs to break to <strong>fits</strong> its container.
    </p>
    <p>
      The resulting effect is close to that achieved by aligning the text to justify (i.e. aligning the text to both edges of its container).
    </p>
  </div>
</div>
<div class="container">
  <h2>Text is justified, lines break as they normally would</h2>
  <div class="text justify">
    <p>
      The following text will not only break where there is a white space, but it will also break in the middle of any word that does not fit inside the line which needs to break to fits its container.
    </p>
    <p>
      The resulting effect is close to that achieved by aligning the text to justify (i.e. aligning the text to both edges of its container).
    </p>
  </div>
</div>
body {
  background-color: #F5F5F5;
  color: #555;
  font-size: 1.1em;
  line-height: 1.5;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

.container {
  margin: 50px auto;
  max-width: 700px;
}

.text {
  padding: 20px;
  background-color: #0099cc;
  color: white;
  text-align: justify;
}

.break {
  word-break: break-all;
}

.justify {
  text-align: justify;
}

strong {
  background-color: #006699;
}