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

Question

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

这是因为带有100%宽度的表位于一个div溢出的位置:auto(它实际上位于jQuery UI.Layout面板中).

我试过了两个overflow: hidden,文字仍然包裹着.我试过了white-space: nowrap,但它拉伸了桌子,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.Layout面板大小拉伸.

如果没有,那么我将如何用jQuery解决这个问题？

我的用例类似于Gmail界面,其中电子邮件主题以粗体显示,并显示邮件正文的开头,但后截断为适合.

Answer 1

这是相当古老但这是我的答案.

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

DEMO

Answer 2

您不必指定单元格大小（以像素为单位），您可以简单地使用百分比：

td.nowrap {
 overflow: hidden;
 white-space: nowrap;
 width: 60%;  /* or whatever */
}