Ответ 1
В дополнение к вашему правилу word-wrap
в ячейке добавьте правило CSS table-layout:fixed
в таблицу (и, возможно, ширину).
У меня есть длинное слово...
p=MIGfMA0GCSqGSIb3DQEBAQUAA4GNADCBiQKBgQCx+wnDhlr7GqHiH6lAaPPuN5F7RjUrtvGyxxZkClJsLaTDeqg/FuJXU7RYdPQ2Ka++tfw0Z9+SRKatLUQQeCqLK8z1/V4p7BaJKPkegMzXgWGnFVmz1tdLFiYUGq0MvVgqWiepcTFmwgSd9g1pGRiCSDHJUDwcc+NidiW4/ixw4QIDAQAB"
... что я пытаюсь поместить в ячейку таблицы (<td>
), для которой я попытался использовать word-wrap: break-word;
и т.п., чтобы заставить текст обернуть, но ни один из них, похоже, не имеет влияют на текст.
Нажмите на изображение, чтобы его увеличить!
Текст идет по горизонтали и по горизонтали и не обертывается. Какое свойство CSS я должен использовать здесь?
<table>
<thead>
<tr>
<th>Name
</th><th>Type
</th><th>Value
</th><th>TTL
</th></tr>
</thead>
<tbody>
<tr>
<td>wtnmail._domainkey.whatthenerd.com.</td>
<td>TXT</td>
<td>"v=DKIM1; k=rsa; p=MIGfMA0GCSqGSIb3DQEBAQUAA4GNADCBiQKBgQCx+wnDhlr7GqHiH6lAaPPuN5F7RjUrtvGyxxZkClJsLaTDeqg/FuJXU7RYdPQ2Ka++tfw0Z9+SRKatLUQQeCqLK8z1/V4p7BaJKPkegMzXgWGnFVmz1tdLFiYUGq0MvVgqWiepcTFmwgSd9g1pGRiCSDHJUDwcc+NidiW4/ixw4QIDAQAB"</td>
<td>300</td>
</tr>
</tbody>
</table>
На основании ответа j08691 я использую это сейчас:
table {
table-layout: fixed;
word-break: break-all;
word-wrap: break-word;
}
И это привело к следующему:
Нажмите на изображение, чтобы его увеличить!
Да, таблица не очень стильная, как раньше, но теперь я могу хотя бы убедиться, что данные показывают (даже когда размер браузера изменяется, т.е. уменьшает разрешение).
Ищем изысканное решение, если оно есть.
В дополнение к вашему правилу word-wrap
в ячейке добавьте правило CSS table-layout:fixed
в таблицу (и, возможно, ширину).
word-break: break-word;
работал у меня на .entry-content table td
во время редактирования в Chrome Inspector.
Чтобы применить его только к оскорбительным ячейкам td
, вы можете создать определенный класс и добавить его в HTML-код:
.break-word {
word-break: break-word;
}
Возможно, совет для тех, кто все еще имеет проблемы с словом:
Мне пришлось добавить white-space: normal
, потому что он был установлен на 'nowrap'
Особенно, если вы используете bootstrap, некоторые элементы, такие как метки, имеют white-space: nowrap
Ваш текст завернут - обратите внимание, как он разбивается после k=rsa;
, потому что у вас там есть место. Но нет места в значении p=
, которое нужно сломать.
Однако вы можете добавить спецификацию word-break: break-all;
к этому элементу, которая может быть ближе к тому, что вы ищете. См. http://jsfiddle.net/zu6Eh/.