Изменение поведения переноса текста в таблице HTML - PullRequest
Новая
       20

Изменение поведения переноса текста в таблице HTML

2 голосов
/ 17 июня 2011

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

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

Пример: 

<table>
    <tr><td>Test Test Test</td></tr>
    <tr><td class="X">Test Test Test Test Test Test Test Test Test</td>
</table>

Где"X" обозначает ячейку, которую следует обернуть, когда это возможно

Поведение по умолчанию: 

|--------------------------------------------|
|Test Test Test Test                         |
|--------------------------------------------|
|Test Test Test Test Test Test Test Test Test|
|--------------------------------------------|

Я хочу вместо этого сделать 

|-------------------|
|Test Test Test Test|
|-------------------|
|Test Test Test Test|
|Test Test Test Test|
|Test               |
|-------------------|

Даже если это меньшечем ширина экрана.Мне интересно, возможно ли это сделать, не зная ширины какого-либо текста при создании таблицы.

Ответы [ 4 ]

2 голосов
/ 17 июня 2011

Используйте стиль WORD-BREAK:BREAK-ALL;

1 голос
/ 20 июня 2011

Я решил эту проблему, установив ширину в один пиксель в ячейке таблицы, которую я хотел принудительно переносить по словам.

1 голос
/ 17 июня 2011

Насколько я знаю, word-wrap: break-word; не будет работать в таблице , если , если вы также используете table-layout:fixed.

Я не совсем понимаю, о чем вы просите.Вы говорите, что хотите, чтобы ячейка занимала width в зависимости от ее содержимого, соответственно растягивалась и переполнялась. это то, что делает таблица.это стандартное поведение таблицы .Единственный случай, когда это не применимо, это когда у вас действительно длинное слово без пробелов.Это приведет к расширению таблицы, независимо.Странное поведение, я знаю.

Если у вас есть последний сценарий, вы должны использовать таблицу фиксированной ширины.Возьмите следующий пример: 

    <table style="width:250px;">
        <tr>
            <td>Test</td>
            <td>Test Test Test Test Test Test Test Test Test</td>
            <td>TestTestTestTestTestTestTestTestTestTestTest</td>
            <td>Test Test Test Test Test Test Test Test Test</td>
        </tr>
    </table>

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

    <table style="width:250px; table-layout:fixed">

Теперь размер таблицы будет 250px, но средний столбец выльется в следующую ячейку (я знаю, что это немного странно).Теперь мы можем использовать word-wrap:break-word для обтекания среднего столбца.Добавление этого к объявлению таблицы создаст ожидаемый вывод.

ОБНОВЛЕНИЕ

Итак, я не думаю, что это возможно с CSS.Проблема в том, что вы хотите, чтобы таблица имела ширину самого широкого столбца, за исключением ячейки X.Чтобы сделать это в table, мы можем написать немного jQuery для вычисления ширины таблицы:

(Обратите внимание, я добавил <span> к <td>, чтобы получить фактическую ширинусодержание. Это может быть заменено другими элементами) 

    <script type="text/javascript">
        $(function() {
            var widths = $('table td').map(function() { 
                return $("span", this).width();
            }).get();

            var biggest = Math.max.apply(Math, widths);
            $("table").width(biggest + "px");
        });
    </script>
    <table>
        <tr><td><span>Test Test Test Test</span></td></tr>
        <tr><td class="X">Test Test Test Test Test Test Test Test Test</td>
        <tr><td><span>Test Test Test Test Test Test</span></td></tr>
    </table>
0 голосов
/ 17 июня 2011

Используйте nowrap. Если вы удалите его из тега <td>, вы увидите, что он будет перенесен снова.

http://jsfiddle.net/yhFk9/

...