title: CSS to wrap text on whitespace, but still expand container to fit long strings without whitespace
body: <p>I have a div containing text. The div should be at least 100px wide, and should try to restrict itself to 100px by wrapping the text inside on whitespace. However, if there is a single word or number which contains no breaking spaces, and which is extremely long, I want the div to expand to fit that string (i.e. no scrollbars, no cutting the text off on the right, and no allowing the text to extend outside of the div). Finally, the text should be centered within the div.</p>
  
  <p>The only way I know to accomplish this is with <code>display: table-cell</code>.</p>
  
  <pre><code>.container {
      display: table-cell;
      width: 100px;
      text-align: center;
  }
  </code></pre>
  
  <p>However, I would like to know whether or not there are alternative methods of achieving this behavior, with pure CSS, but without using CSS tables.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="true">
  <div class="snippet-code snippet-currently-hidden">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.container {
    display: table-cell;
    width: 100px;
    text-align: center;
    background: skyblue;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="container"&gt;
    asd asd asdasdasdasdasdasdasdasdasdasdassdasdasdasdasd asd asd asd asd asd asd asd asd asd asd asd &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>