Mam jedno długie słowo ...

p=MIGfMA0GCSqGSIb3DQEBAQUAA4GNADCBiQKBgQCx+wnDhlr7GqHiH6lAaPPuN5F7RjUrtvGyxxZkClJsLaTDeqg/FuJXU7RYdPQ2Ka++tfw0Z9+SRKatLUQQeCqLK8z1/V4p7BaJKPkegMzXgWGnFVmz1tdLFiYUGq0MvVgqWiepcTFmwgSd9g1pGRiCSDHJUDwcc+NidiW4/ixw4QIDAQAB"

... że staram się zmieścić w komórce tabeli (<td>), dla którego próbowałem użyćword-wrap: break-word; i tym podobne, aby wymusić zawijanie tekstu, ale żaden z nich nie ma żadnego wpływu na tekst.

( PRZYKŁAD NA ŻYWO )

Kliknij obraz, aby go powiększyć!

Tekst ciągnie się w poziomie i nie zawija. Jakiej właściwości CSS mam używać tutaj?

KOD

<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

Na podstawie odpowiedzi j08691 używam tego teraz:

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

W wyniku tego:

Kliknij obraz, aby go powiększyć!

Tak, tabela nie jest super stylowa, jak kiedyś, ale teraz mogę przynajmniej upewnić się, że dane pokazują (nawet gdy rozmiar przeglądarki jest mniejszy, tj. Mniejsze rozdzielczości).

Wciąż szukam eleganckiego rozwiązania, jeśli takie istnieje.