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

中的span标记上试试这个

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

（晚但可能会帮助其他人）

Answer 3

也许这JQuery HTML Truncator by Henrik Nyh会有所帮助：）

Answer 4

您不必在像素中指定单元格大小，只需使用百分比：

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

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

4 个答案: