title: Prevent an <em> tag in a <td> from changing height
body: <p>I have a DOM structure of something like:</p>
  <pre><code>&lt;table&gt;
     &lt;tbody&gt;
      &lt;tr&gt;
       &lt;td&gt;
        &lt;div&gt;
         &lt;div&gt;...some stuff&lt;/div&gt;
         &lt;div&gt;&lt;em&gt; some text in em&lt;/em&gt;&lt;/div&gt;
        &lt;/div&gt;
       &lt;/td&gt;
       &lt;td&gt;
          ...a button that changes width
       &lt;/td&gt;
  ...
  </code></pre>
  <p>The problem is that, when the button grows wider, the width of the td on the left hand side automatically changes, and the text in the em tag could not fit and wraps to the second line, messing everything up.</p>
  <p>I am wondering if there is a CSS solution so that when the button becomes wider, the divs and the em can just automatically become narrower and the overflowing text becomes ellipsis?</p>
  <p>The DOM structure cannot be changed because it's generated by a template in a large code base. I've tried max-width, wordwrap, spacewrap, etc., but they don't seem to work.</p>