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

我希望表中某一列中的文本不换行,而只是截短,使其适合 现在的 表格单元格的大小。我不希望表格单元格改变大小,因为我需要表格精确 100% 容器的宽度。

这是因为 100% 宽度位于 div with overflow: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 会截断任何流过来的内容,但我不能使用固定大小,因为我希望表使用 用户界面布局 面板尺寸。

如果不是,那么我如何用jquery解决这个问题?

我的用例类似于gmail界面,其中一个电子邮件主题是粗体的,消息正文的开头是显示的,但随后被截断以适合。