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