Обрезать текст до размера ячейки таблицы без переноса с использованием CSS или JQuery

Question

Я хочу, чтобы текст в одном из столбцов таблицы не переносился, а просто усекался, чтобы он соответствовал размеру current ячейки таблицы. Я не хочу, чтобы ячейка таблицы меняла размер, поскольку мне нужно, чтобы таблица была точно 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

Попробуйте это на теге span внутри td

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

( поздно, но может помочь кому-то еще )

Answer 3

Вам не нужно указывать размер ячейки в пикселях , вы можете просто использовать проценты :

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

Answer 4

Может быть, это JQuery HTML Truncator от Henrik Nyh поможет:)