Блог

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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