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

I want the text in one of the columns of a table to not wrap, but to just truncate so that it fits within the current size of the table cell. I don't want the table cell to change size, as I need the table to be exactly 100% the width of the container.

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

This is because the table with 100% width is inside of a positioned div with overflow: auto (it's actually inside of a jQuery UI.Layout panel).

这是因为具有100%宽度的表位于具有overflow:auto的定位div内(它实际上位于jQuery UI.Layout面板内)。

I tried both overflow: hidden and the text still wrapped. I tried white-space: nowrap, but it stretched the table wider than 100% and added a horizontal scroll bar.

我尝试了两个溢出:隐藏和文本仍然包装。我尝试了白色空间: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>

Is there a way using CSS to solve this? If I had a fixed table cell size, then overflow:hidden would truncate anything that flows over, but I can't used a fixed size as I want the table to stretch with the UI.Layout panel size.

有没有办法用CSS来解决这个问题?如果我有一个固定的表格单元格大小,那么overflow:hidden会截断任何流过的内容,但是我不能使用固定大小,因为我希望使用UI.Layout面板大小来扩展表格。

If not, then how would I solve this with jQuery?

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

My use case is similar to the Gmail interface, where an email subject is bolded and the beginning of the message body is shown, but then truncated to fit.

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

4 个解决方案

#1

This is quite old but here is my answer.

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

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

DEMO

#2

Try this on the span tag inside td

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

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

(late but might help someone else)

(迟到但可能会帮助其他人)

#3

Maybe this JQuery HTML Truncator by Henrik Nyh will help :)

也许Henrik Nyh的这个JQuery HTML Truncator会帮助:)

#4

You don't have to specify the cell size in pixels, you can simply use percentages:

您不必以像素为单位指定单元格大小,只需使用百分比:

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

#1