使用css或jquery截断文本以适应表格单元格，而无需换行

我希望表的一列中的文本不换行，而只是截断，以便它符合表单元格的当前大小。我不希望表格单元格改变大小，因为我需要表格精确地

100%

容器的宽度

这是因为宽度为

100%

的表位于带有overflow:auto的定位

div

内（实际上位于jQuery

UI.Layout

面板内）

我尝试了溢出：隐藏和文本仍然被包装。我尝试了

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

div.container{
位置：绝对位置；
溢出：自动；
/*用户可以滑动调整大小栏来更改宽度和高度*/
宽度：600px；
高度：300px；
}
表{宽度：100%}
诺拉普{
溢出：隐藏；
空白：nowrap；
}
从…起
主题
日期
鲍勃·史密斯
消息主题
这是邮件正文的预览，可能很长。
2010-03-30 02:18上午

有没有办法用CSS解决这个问题？如果我有一个固定的表格单元格大小，那么

overflow:hidden

将截断任何溢出的内容，但是我不能使用固定的大小，因为我希望表格能够随着

UI.Layout

面板大小而伸缩

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

---

我的用例类似于Gmail界面，其中电子邮件主题以粗体显示，邮件正文的开头显示，但随后会根据需要进行截断

您不必以像素为单位指定单元格大小，只需使用百分比即可：

---

在td内的span标签上试试这个

display: block;
word-break: break-all;

---

（虽然迟到了，但可能会帮助别人）

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

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

---

@RegDwight:我确实尝试过这个方法，通过css和直接在html中分配宽度。但在每一种情况下，表仍然会扩展到100%以上，我会得到一个水平滚动条；溢出：隐藏

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