Подтвердить что ты не робот

Свойство CSS Word-wrap, не влияющее на ячейку таблицы

У меня есть длинное слово...

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>

CSS

На основании ответа j08691 я использую это сейчас:

table {
   table-layout: fixed;
   word-break: break-all;
   word-wrap: break-word;
}

И это привело к следующему:

Снимок экрана - Нажмите, чтобы увеличить!
Нажмите на изображение, чтобы его увеличить!

Да, таблица не очень стильная, как раньше, но теперь я могу хотя бы убедиться, что данные показывают (даже когда размер браузера изменяется, т.е. уменьшает разрешение).

Ищем изысканное решение, если оно есть.

4b9b3361

Ответ 1

В дополнение к вашему правилу word-wrap в ячейке добавьте правило CSS table-layout:fixed в таблицу (и, возможно, ширину).

Пример jsFiddle

Ответ 2

word-break: break-word; работал у меня на .entry-content table td во время редактирования в Chrome Inspector.

Чтобы применить его только к оскорбительным ячейкам td, вы можете создать определенный класс и добавить его в HTML-код:

.break-word {
    word-break: break-word; 
}

Ответ 3

Возможно, совет для тех, кто все еще имеет проблемы с словом: Мне пришлось добавить white-space: normal, потому что он был установлен на 'nowrap'

Особенно, если вы используете bootstrap, некоторые элементы, такие как метки, имеют white-space: nowrap

Ответ 4

Ваш текст завернут - обратите внимание, как он разбивается после k=rsa;, потому что у вас там есть место. Но нет места в значении p=, которое нужно сломать.

Однако вы можете добавить спецификацию word-break: break-all; к этому элементу, которая может быть ближе к тому, что вы ищете. См. http://jsfiddle.net/zu6Eh/.