Разрыв силовой линии в ячейке таблицы html

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

Как я могу сделать это без какой-либо функции JS, используя только чистый HTML с CSS?

Ответ 1

Я думаю, что вы пытаетесь сделать loooooooooooooong слов или URL-адресов, чтобы они не выталкивали размер таблицы. (Я только пытался сделать то же самое!)

Вы можете сделать это легко с помощью DIV, указав ему стиль word-wrap: break-word (и вам может понадобиться также установить его ширину).

div {
    word-wrap: break-word;         /* All browsers since IE 5.5+ */
    overflow-wrap: break-word;     /* Renamed property in CSS3 draft spec */
    width: 100%;
}

Однако для таблиц необходимо либо обернуть содержимое в DIV (или другой тег блока), либо применить: table-layout: fixed. Это означает, что ширины столбцов больше не являются текучими, но определяются на основе ширины столбцов только в первой строке (или с помощью указанной ширины). Подробнее здесь.

Пример кода:

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

table td {
    word-wrap: break-word;         /* All browsers since IE 5.5+ */
    overflow-wrap: break-word;     /* Renamed property in CSS3 draft spec */
}

Надеюсь, что кто-то поможет.

Ответ 2

Я предлагаю вам использовать div или абзац обертки:

<td><p style="width:50%;">Text only allowed to extend 50% of the cell.</p></td>

И вы можете сделать из него класс:

<td class="linebreak"><p>Text only allowed to extend 50% of the cell.</p></td>

td.linebreak p {
    width: 50%;
}

Все это предполагает, что вы имели в виду 50%, как в 50% ячейки.

Ответ 3

Вы можете поместить текст в div (или другой контейнер) шириной 50%.

http://jsfiddle.net/6gjsd/

Ответ 4

Трудно ответить вам без HTML, но в целом вы можете поставить:

style="width: 50%;"

В ячейке таблицы или поместите div внутри ячейки таблицы и поместите в нее стиль.

Но одна проблема - "50% чего?" Это 50% родительского элемента, который может быть не таким, каким вы хотите.

Отправьте копию своего HTML-кода и, возможно, получите лучший ответ.

Ответ 5

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