防止 <td> 中的 <em> 标签改变高度答案

【问题标题】：Prevent an <em> tag in a <td> from changing height防止 <td> 中的 <em> 标签改变高度
【发布时间】：2015-09-26 03:06:18
【问题描述】：

我的 DOM 结构类似于：

  <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>

问题是，当按钮变宽时，左侧 td 的宽度会自动改变，并且 em 标签中的文本无法容纳并换行到第二行，把所有东西都搞砸了。

我想知道是否有 CSS 解决方案，当按钮变宽时，div 和 em 可以自动变窄，溢出的文本变成省略号？

我对 CSS 有点陌生，DOM 结构无法更改，因为它是由大型代码库中的模板生成的。我尝试过 max-width、wordwrap、spacewrap 等，但它们似乎没有工作...请帮助

【问题讨论】：

这可能会让你更接近你想去的地方，但这不是一个完整的解决方案：你可以使用 CSS white-space:nowrap; 来阻止 em 和 divs 中的文本换行当按钮变宽时。

标签： html css reactjs html-table em

【解决方案1】：

不幸的是，仅使用 CSS 来解决此问题只有部分解决方案。该解决方案要求您定义一个长度，在该长度之后将发生剪辑，当您在页面渲染期间不知道确切的长度时，这是有问题的。

这个解决方案看起来像这样：

.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>

如您所见，文本会在 100 像素后剪辑，但为此您需要先定义宽度。此外，由于两列都不换行，可能会导致表格本身忽略其定义的宽度并溢出。

但是，使用一些 jQuery，您可以利用自动调整表格大小的优势，让它按您的意愿工作：

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>

如您所见，这里我们仅在表格绘制后添加width 和no-wrap 属性，以便列大小计算由按钮大小决定，而不受其他列的干扰。

请注意，如果需要，这也可以在没有 jQuery 的情况下实现，但这需要稍微复杂的代码。

【讨论】：