sirve - La propiedad CSS de ajuste de palabra no afecta a una celda de tabla

hojas de estilo css para tablas

Question

Tengo una palabra larga ...

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

... que estoy tratando de encajar en una celda de la tabla ( <td> ), para la cual he intentado usar word-wrap: break-word; y similares para forzar que el texto se ajuste, pero ninguno de ellos parece tener ningún efecto en el texto.

( AQUÍ ESTÁ EL EJEMPLO VIVO )

Haga clic en la imagen para ampliar!

El texto sigue y sigue horizontalmente, y no se ajusta. ¿Qué propiedad CSS debo usar aquí?

EL CÓDIGO

<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

Basado en la respuesta de j08691, estoy usando esto ahora:

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

Y eso ha resultado en esto:

Haga clic en la imagen para ampliar!

Sí, la tabla ya no es tan elegante como solía ser, pero ahora puedo al menos asegurarme de que los datos se muestren (incluso cuando el navegador cambia de tamaño, es decir, resoluciones más pequeñas).

Sigo buscando una solución elegante, en su caso.

Answer 1

Además de su regla de word-wrap en la celda, agregue la regla table-layout:fixed CSS table-layout:fixed a su tabla (y posiblemente un ancho).

Ejemplo de jsFiddle

Answer 2

Su texto está envuelto - observe cómo se rompe después de k=rsa; Porque tienes un espacio allí. Pero no hay espacio en el valor p= para romper.

Sin embargo, puede agregar un word-break: break-all; especificación de ese elemento, que podría estar más cerca de lo que está buscando. Ver http://jsfiddle.net/zu6Eh/ .

Answer 3

Tal vez una sugerencia para cualquier persona que todavía tenga problemas con la palabra clave: tuve que agregar white-space: normal porque estaba configurado en ''nowrap''

Especialmente si usa bootstrap, algunos elementos como las etiquetas tienen white-space: nowrap

Answer 4

word-break: break-word; trabajé para mí en .entry-content table td mientras editaba en Chrome''s Inspector.

Para aplicarlo solo a las celdas td ofensivas, puede crear una clase específica y agregarla al HTML de td:

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