title: Word-wrap in an HTML table
body: <p>I've been using <code>word-wrap: break-word</code> to wrap text in <code>div</code>s and <code>span</code>s. However, it doesn't seem to work in table cells. I have a table set to <code>width:100%</code>, with one row and two columns. Text in columns, although styled with the above <code>word-wrap</code>, doesn't wrap. It causes the text to go past the bounds of the cell. This happens on Firefox, Google Chrome and Internet Explorer.</p>
  
  <p>Here's what the source looks like:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>td {
    border: 1px solid;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;table style="width: 100%;"&gt;
    &lt;tr&gt;
      &lt;td&gt;
        &lt;div style="word-wrap: break-word;"&gt;
          Looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong word
        &lt;/div&gt;
      &lt;/td&gt;
      &lt;td&gt;&lt;span style="display: inline;"&gt;Short word&lt;/span&gt;&lt;/td&gt;
    &lt;/tr&gt;
  &lt;/table&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>The long word above is larger than the bounds of my page, but it doesn't break with the above HTML. I've tried the suggestions below of adding <code>text-wrap:suppress</code> and <code>text-wrap:normal</code>, but neither helped.</p>