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

【问题标题】：Truncate text to fit table cell without wrapping using css or jquery截断文本以适合表格单元格而不使用 css 或 jquery 换行
【发布时间】：2013-08-22 00:47:38
【问题描述】：

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

这是因为具有100% 宽度的表格在定位的div 内，溢出：自动（它实际上在一个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 界面，其中电子邮件主题以粗体显示并显示邮件正文的开头，但随后被截断以适应。

【问题讨论】：

标签： jquery css

【解决方案1】：

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

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

DEMO

【讨论】：

这项工作除了设置 td 样式=white-space: nowrap; overflow: hidden;

【解决方案2】：

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

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

（迟到但可能会帮助别人）

【讨论】：

【解决方案3】：

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

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

【讨论】：

@RegDwight：我当然试过了，既可以通过 css 分配宽度，也可以直接在 html 中分配宽度。但在每种情况下，表格仍会扩展超过 100%，并且我会得到一个水平滚动条。