title: How can I wrap words but not wrap by whitespace with CSS?
body: <p>With the following markup, is it possible (and how) to achieve a wrapping like shown in the preview?</p>
  
  <p><strong>Markup</strong></p>
  
  <pre><code>&lt;div class="filled-box"&gt;
    &lt;h2&gt;Hi there&lt;/h2&gt;
    &lt;p&gt;I am just a text with some words, that want to fill the entire space&lt;/p&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>.filled-box {
    width: 80px;
    height: 80px;
    position: absolute;
    overflow: hidden;
  }
  
  .filled-box h2,
  .filled-box p {
    display: inline;
    overflow-wrap: break-word;
    font-size: 20px;
    margin: 0;
    padding: 0;
  }
  </code></pre>
  
  <p><strong>Preview</strong></p>
  
  <pre><code>Hi there I am
  just a text w
  ith some word
  s, that want 
  to fill the e
  ntire space
  </code></pre>
  
  <p>If there is a solution it of course may use CSS3 Syntax.</p>