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

Question

我的 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 结构，因为它是由大型代码库中的模板生成的。我已经尝试过最大宽度、wordwrap、 spacewrap 等，但它们似乎不起作用...请帮忙

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

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

但是，对于某些 jQuery，您可以利用自动 table 重新调整大小的优势，使其按您希望的方式工作：

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>

如您所见，这里我们仅在绘制 table 之后才添加 width 和 no-wrap 属性，因此列大小计算由 table 的大小决定该按钮不受其他列的干扰。

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

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

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

html

css

html-table

em

reactjs