Слово обертывание длинной табличной ячейки при сохранении динамической ширины в других

Question

У меня есть таблица, которая имеет длинную линию в одной из ее ячеек. Мне нужна длинная линия, чтобы быть разделенной, чтобы она не заставила таблицу шириной более чем 100%. Я обнаружил, что добавив table-layout: fixed а также word-wrap: word-break, это завершит длинную ячейку. Однако побочный эффект использования table-layout это то, что это заставляет все столбцы иметь одинаковую ширину.

Вы можете увидеть пример этого здесь:

http://jsfiddle.net/rydld/2/

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

Данные в таблице будут загружены динамически, поэтому решение, которые значения ширины жестких кодов не являются хорошими, потому что нет возможности заранее узнать, насколько широким должен быть столбец. Мой единственный вариант - использовать <table>, Я не могу использовать <div> или какой -то другой элемент.

Answer 1

Согласно официальная спецификация, когда вы используете фиксированные table-layout, ширина столбца первой строки определяет ширину столбца всей таблицы. Если ни один из них не будет определен, он будет равномерно распределять ширину столбца.

Поскольку, похоже, нет никакого другого варианта, я использовал следующий метод:

1. Загрузка данных в таблицу, пока table-layout установлен на Auto.
2. Читая ширину столбцов, я хочу быть динамичным.
3. Установка ширины столбцов на их текущие значения.
4. Изменение table-layout исправить.

Вот пример, который не идеален (ширина немного уменьшается):

http://jsfiddle.net/rydld/7/

Answer 2

Я обнаружил это, борясь с той же проблемой:

Установка разрыва на элементе точно соответствует вставке пространства с нулевой шириной между каждым символом текста, содержащегося внутри этого элемента.

За исключением того, что это на самом деле работает с нормальными, динамическими таблицами!

Это решение очень быстрое, поскольку оно не требует никакого JavaScript.

(Однако, однако, можно использовать из JavaScript, если это необходимо. Найдите все ячейки со словом, возьмите все текстовые узлы дочерних текстов и вставьте пространство с нулевой шириной между каждым символом. Даже тогда сценарий будет работать только один раз во время загрузки страницы, Так что это все еще должно быть чрезвычайно эффективным.)

Пространство с нулевой шириной ​

Answer 3

Вы можете использовать: Word-Wrap CSS-стиль, чтобы сломать длинные предложения.

word-wrap: break-word

Answer 4

Легко обрабатывать/обернуть длинные слова в Дивизионпесок фиксированные таблицы (Table-Layout: Исправлено) - просто примените CSS3 Word-wrap: разрывы.

В пределах динамические таблицы Выше собственность выполняет только половину работы. Нам нужно дополнительно, чтобы помочь браузерам найти точки разрыва.

Немного подробного объяснения можно найти в статье Обернуть длинные слова в динамические таблицы.