Как заставить ячейки таблицы отображать столько текста, сколько подходит в одной строке, например, GMail и Google Reader?

Каков наилучший способ сделать таблицу (не обязательно используя тег таблицы), где каждая строка имеет фиксированную высоту и заполняет все доступное горизонтальное пространство, а один из столбцов имеет динамическую ширину, которая показывает как можно больше текста без прерывания линии? Как Gmail и Google Reader.

Мне очень нравится этот способ представления информации. Расширяемая строка фиксированной высоты - это хороший способ сканирования списка данных, IMHO.

Ответы

Ответ 1

Смотрите: http://jsfiddle.net/gtRnn/

<p>What is the best way *snip*</p>

p {
    border: 1px dashed #666;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis
}

Каждое свойство делает что-то полезное:

  • white-space: nowrap заставляет текст оставаться на одной строке.
  • overflow: hidden останавливает это.
  • text-overflow: ellipsis работает во всех браузерах, кроме Firefox (поддержка запланирована)
  • border нет ни в коем случае.

Ответ 2

Другие ответы не работают в таблице, как показано здесь: http://jsfiddle.net/gtRnn/8/ - ссылка также содержит правильный способ сделать это.

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

Рабочий пример: http://jsfiddle.net/gtRnn/8/

Код:

<style type="text/css">
    .my-table {
        /* This is important for ellipsis to work in tables.
           Don't forget to explicitly set the widths on all columns. */
        table-layout: fixed;
        width: 100%;              /* The table must be given a width. */
    }

    .overflow-ellipsis {
        overflow: hidden;        /* Ellipsis won't work without this. */
        text-overflow: ellipsis; /* The most important part */
    }
</style>

<table border="1" class="my-table">
    <tr>
        <td width="10%">1.</td>
        <td width="90%" class="overflow-ellipsis">
            In this TD, wrapping still occurs if there is white space.
            ButIfThereIsAReallyLongWordOrStringOfCharactersThenThisWillNotWrapButUseEllipsis
        </td>
    </tr>
    <tr>
        <td width="10%">2.</td>
        <td width="90%" class="overflow-ellipsis" style="white-space:nowrap;">
            In this TD, wrapping will not occur, even if there is white space.
        </td>
    </tr>
</table>

Процент ширины смешивания и абсолютная ширина не работают корректно (в Google Chrome по крайней мере).

Ответ 3

Ключ: overflow: hidden; и white-space: nowrap;

<div style="width: 200px; overflow: hidden; white-space: nowrap;">some long text.............asdfasdf........</div>