it-swarm.com.ru

Как разбить длинное одиночное слово в <td> с помощью CSS?

в tdtable у меня очень длинное одиночное слово " Pneumonoultramicroscopicsilicovolcanoconiosis " и я хочу уменьшить ширину table, но не могу этого сделать из-за этого длинного Слова в одном из td я могу нарушить это Слово, дав <br /> но есть ли способ CSS разбить это слово в соответствии с доступным пространством. без указания разрыва строки или редактирования чего-либо в HTML.

19
Jitendra Vyas

Попробуйте следующее:

Word-wrap: break-Word;
white-space: normal;

Word-wrap - это css3 (однако он работает в IE). Однако, возможно, вы не сможете заставить его работать в старых браузерах.

28
Ben Rowe

Следующие работы для меня:

    Word-wrap: break-Word;
    Word-break: break-all;
    white-space: normal;
13
Tigertron

Попробуйте следующий код для разбиения Word, если там нет пробела.

Word-wrap: break-Word;
Word-break: break-all;
6
Kausha Mehta
td span{display:block;width:your_max_width_here.px}

<td><span>Pneumonoultramicroscopicsilicovolcanoconiosis</span></td>
5
nicholasklick

попробуй мой код -

С корпусом стола

table>tbody>tr>th{
    Word-wrap: break-Word;
    Word-break: break-all;
    white-space: normal;
}

Без стола

table>tr>th{
    Word-wrap: break-Word;
    Word-break: break-all;
    white-space: normal;
}
4
Dadaso Zanzane

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

Наконец я нашел этот компромисс:

table {
    table-layout: fixed;
    overflow-wrap: break-Word;
    Word-wrap: break-Word; /* IE */
}

Если вы хотите относиться к своим строкам одинаково, это работает лучше всего.

2
Mariusz Ignatowicz

Я обнаружил, что когда в ячейке есть смесь контента, несколько длинных отдельных слов, смешанных с другими короткими словами, Word-break: break-Word; работает лучше всего. Он будет разбиваться на пустые места, когда это возможно. Хотя это не поддерживается в IE11. Если вы установите break-all для любого из упомянутых свойств, оно всегда будет разрываться в Word (если только ему не повезло оказаться в пробеле).

0
Derek Wade

Следующий код должен работать;

td {Word-break: break-all}
0
Baqer Naqvi