Prevent an <em> tag in a <td> from changing height

Issue

I have a DOM structure of something like:

<table>
   <tbody>
    <tr>
     <td>
      <div>
       <div>...some stuff</div>
       <div><em> some text in em</em></div>
      </div>
     </td>
     <td>
        ...a button that changes width
     </td>
...

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.

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?

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.

Solution

Unfortunately, there is only a partial solution using only CSS to this problem. The solution requires you to define a length after which clipping will occur, which is problematic when you don't know the exact length during the page rendering.

This solution would look something along the lines of this:

.clip {
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    width:100px;
}
button {
    white-space: nowrap;
}

<table>
    <tbody>
        <tr>
            <td>
                <div class="clip">...some stuff</div>
                <div class="clip"><em> some long text in em</em></div>
            </td>
            <td>
                <button>...a long button that changes width</button>
            </td>
        </tr>
    </tbody>
</table>

As you can see, the text does clip after 100px, but for this you would need to first define the width. Moreover, as both columns do not wrap, it could cause the table itself to ignore its defined width and overflow.

However, with some jQuery you could take advantage of the automatic table re-sizing to get this to work like you wish:

var w = $('.clip').first().width();
$('.clip').css({
  'white-space': 'nowrap',
  'width': w
});

table {
  width: 300px;
}
.clip {
  text-overflow: ellipsis;
  overflow: hidden;
}
button {
  white-space: nowrap;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tbody>
    <tr>
      <td class="first">
        <div class="clip">...some stuff</div>
        <div class="clip"><em> some long text in em</em></div>
      </td>
      <td class="second">
        <button>...a long button that changes width</button>
      </td>
    </tr>
  </tbody>
</table>

As you can see, here we add the width and the no-wrap attributes only after the table gets drawn, so that the column size calculation is dictated by the size of the button without interference from the other column.

Note that this can also be achieved without jQuery if needed, but that would require slightly more complex code.

Answered By - tbrisker