Разрыв силовой линии в ячейке таблицы 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 туда, где вы хотите разбить ячейку таблицы.