CSS: Ограничить таблицу с длинным содержимым ячейки до ширины страницы?

Возьмем следующий CSS + HTML:

<style>
    div.stuff {
        overflow: hidden;
        width: 100%;
        white-space: nowrap;
    }
    table { width: 100%; }
    td { border: 1px dotted black; }
</style>

<table>
    <tr><td>
        <div class='stuff'>Long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text</div>
    </td></tr>
</table>

Это приводит к росту таблицы для размещения всего длинного текста. (Сделайте свое окно браузера меньшим, чтобы увидеть, есть ли у вас огромное разрешение экрана.)

Я добавил width: 100% и overflow: hidden, чтобы указать, что длинный текст следует просто отключить, но, похоже, это игнорирует. Как ограничить таблицу/ячейку таблицы /div таким образом, чтобы ширина таблиц не превышала ширину документа?

(Пожалуйста, не комментируйте достоинства использования таблицы вообще. Я действительно показываю табличные данные, поэтому использование таблицы семантически корректно. Также не ставьте под сомнение удобство отрезания текста; на самом деле кнопка "expand", которая позволяет пользователю просматривать полное содержимое. Спасибо!)

(Edit: Я тоже пробовал max-width, безрезультатно).

Ответы

Ответ 1

Чтобы добиться этого, вы должны обернуть длинный текст в два div. Внешняя получает position: relative и содержит только внутреннюю. Внутренний получает position: absolute, overflow: hidden и width: 100% (это ограничивает его размер ячейки таблицы).

Теперь алгоритм табличной компоновки считает, что эти ячейки таблицы пусты (потому что абсолютно позиционированные элементы исключены из расчетов макета). Поэтому мы должны сказать, что это будет расти, несмотря на это. Интересно отметить, что установка width: 100% в соответствующем элементе <col> работает в том смысле, что он фактически не заполняет 100% ширины, а 100% минус ширину всех остальных столбцов (которые имеют размер автоматически). Он также нуждается в vertical-align: top, так как в противном случае (пустой) внешний div выравнивается в середине, поэтому элемент с абсолютно позиционированием будет отключен на половину строки.

Вот полный пример с трехколоночной, двухстрочной таблицей, показывающей это на работе:

CSS

div.outer {
    position: relative;
}
div.inner {
    overflow: hidden;
    white-space: nowrap;
    position: absolute;
    width: 100%;
}
table {
    width: 100%;
    border-collapse: collapse;
}
td {
    border: 1px dotted black;
    vertical-align: top;
}
col.fill-the-rest { width: 100%; }

HTML:

<table>
    <col><col><col class="fill-the-rest">
    <tr>
        <td>foo</td>
        <td>fooofooooofooooo</td>
        <td>
            <div class='outer'>
                <div class='inner'>
                    Long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text
                </div>
            </div>
        </td>
    </tr>
    <tr>
        <td>barbarbarbarbar</td>
        <td>bar</td>
        <td>
            <div class='outer'>
                <div class='inner'>
                    Some more long text Some more long text Some more long text Some more long text Some more long text Some more long text Some more long text Some more long text Some more long text Some more long text Some more long text Some more long text Some more long text Some more long text Some more long text Some more long text Some more long text Some more long text
                </div>
            </div>
        </td>
    </tr>
</table>

В этом примере первые два столбца будут иметь минимально возможный размер (т.е. пространства заставят их обернуть много, если вы также не добавите к ним white-space: nowrap).

jsFiddle: http://jsfiddle.net/jLX4q/

Ответ 2

Я добавил ширину: 100% и переполнение: скрыто, чтобы указать, что длинный текст следует просто отключить, но, похоже, это игнорирует.

Не игнорируя этого, ваш div расширяет на 100% ширину вашей таблицы, которая будет расширяться на 100%, просто дайте вашему td максимальную ширину, и она должна обрезаться, как вы ожидаете.

Ответ 3

Создание решения @Timwi...

table {
 width: 100%;
 border: 1px solid #ccc;
}

td {
 padding: 14px;
 line-height: 1.5;
 border: 1px solid #ccc;
}

.outer {
 position:relative;
 height: 22px;
}

.inner {
  position: absolute;
  overflow: hidden;
  width: 100%;
  white-space: nowrap;
  margin: auto;
  top: 0;
  bottom:0;
}

<table>
  <tr>
    <td>
      <div class="outer">
        <div class="inner">
          this_is_a_really_long_string_of_text
        </div>
      </div>
    </td>
    <td>
      222222222
    </td>
  </tr>
</table>

Я использую bootstrap 2.3.2, так что откуда берется значение высоты. Здесь ссылка на скрипку http://jsfiddle.net/YFCV6/

Ответ 4

у вас установлен nowrap, поэтому td не может должным образом ограничивать содержимое. Удаление этого значения должно обеспечить желаемый результат.

Ответ 5

Пока у вас есть ширина: 100% тегов, он будет расширяться, чтобы содержать контент.

Один из способов получить желаемый результат (текст, который не обертывается) - иметь внешний div w/overflow hidden + установленную ширину, а затем внутренний div с суперширокой шириной.

http://jsfiddle.net/xvaEw/