HTML: по мере того как таблица сужается, переполнение текста должно обрезать все больше и больше текста

Question

У меня есть веб-страница с таблицей HTML, созданной элементом управления ASP.NET. Верхний ряд таблицы эмулирует панель инструментов. Этот верхний ряд выложен примерно так:

<tr>
  <td style="white-space:nowrap;">
    <span>Very long title</span>&nbsp;
  </td>
  <td>
    { bunch of hyperlinks with background images, emulating a toolbar }
  </td>
</tr>

Я застрял в том факте, что это таблица с содержимым области заголовка, помещаемым в span, и, вероятно, с этим встроенным стилем, не определяющим перенос.

Эта таблица должна сужаться, когда страница сужается, и это довольно хорошо. Однако, если фактический текст заголовка (который может варьироваться) слишком длинный, он фактически служит ограничением того, насколько узкой может быть таблица, что может привести к перекрытию с другими элементами на странице. (Я использую IE8, кстати.)

Я попытался применить overflow:hidden, text-overflow:ellipsis и display: inline-block к диапазону и добавить значение ширины для ячейки таблицы через таблицу стилей. (Display:block на промежутке удваивает высоту строки, чего я не хотел, поэтому inline-block был моим выбором.) Текст заголовка выглядел усеченным, как я и хотел. Но стол не стал бы уже.

После возни с изменением значений и стилей с помощью IEDT я пришел к выводу, что при определении того, насколько узкой может быть таблица, текст все равно считался полной длиной. Промежуток был относительно коротким, появился только текст, который появился в промежутке, но для целей ширины table-cell текст все еще был там.

Я нигде не нашел документально подтвержденное это явление, но, может быть, я просто не могу обойтись достаточно. :) Если text-overflow не может помочь мне, я думаю, мне придется динамически обрезать заголовок с помощью сценария, что я бы предпочел не делать. Есть ли способ сделать то, что я хочу, только через CSS?

Answer 1

Поведение отображения ячеек таблицы отличается от обычного поведения блоков. Чтобы сделать его более типичным, вам нужно сначала изменить свойство макета таблицы на «фиксированное» и установить ширину таблицы:

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

Это отключит автоматическое определение размера ячейки в большинстве случаев. После этого вы можете установить ширину и переполнение тд как обычно.

td.title { white-space:nowrap;overflow: hidden; width: 200px; }

Вот пример: http://jsfiddle.net/vS3qq/1/

Answer 2

Я думаю, это то, что вы ищете. Сначала избавьтесь от style="white-space:nowrap;".

Затем измените <span> на <div> стиль, подобный следующему:

<div style="height 18px;overflow:hidden;">

значение высоты должно быть скорректировано в соответствии с вашей высотой строки, но это должно работать.