jquery - 截断文本以适合表格单元格而不使用 css 或 jquery 换行

Question

我希望表格的某一列中的文本不换行，而是截断以使其适合表格单元格的当前 大小。我不希望表格单元格改变大小，因为我需要表格正好是容器宽度的 100%。

这是因为具有 100% 宽度的表格位于定位的 div 中，并带有 overflow: auto(它实际上位于 jQuery UI.Layout面板)。

我尝试了 overflow: hidden 和文本仍然换行。我尝试了 white-space: nowrap，但它把表格拉伸(stretch)得比 100% 还宽，并添加了一个水平滚动条。

div.container {
  position: absolute;
  overflow: auto;
  /* user can slide resize bars to change the width & height */
  width: 600px;  
  height: 300px;
}
table { width: 100% }
td.nowrap {
  overflow: hidden;
  white-space: nowrap;
}
<div class="container">
  <table>
    <tr>
      <td>From</td>
      <td>Subject</td>
      <td>Date</td>
    </tr>
    <tr>
      <td>Bob Smith</td>
      <td class="nowrap">
        <strong>Message subject</strong>
        <span>This is a preview of the message body and could be long.</span>
      </td>
      <td>2010-03-30 02:18AM</td>
    </tr>
  </table>
</div>

有没有办法使用 CSS 来解决这个问题？如果我有一个固定的表格单元格大小，那么 overflow:hidden 会截断溢出的任何内容，但我不能使用固定大小，因为我希望表格随 UI 一起拉伸(stretch)。布局面板大小。

如果不是，那我该如何用 jQuery 解决这个问题？

我的用例类似于 Gmail 界面，其中电子邮件主题加粗并显示邮件正文的开头，但随后被截断以适合。

Answer 1

这已经很老了，但这是我的答案。

table { width: 100%; table-layout: fixed;}

DEMO