Ajuste de palabras en una tabla HTML
He estado usando word-wrap: break-wordpara ajustar texto en divs y spans. Sin embargo, no parece funcionar en las celdas de la tabla. Tengo una tabla configurada width:100%con una fila y dos columnas. El texto en columnas, aunque tiene el estilo anterior word-wrap, no se ajusta. Hace que el texto sobrepase los límites de la celda. Esto sucede en Firefox, Google Chrome e Internet Explorer.
Así es como se ve la fuente:
td {
border: 1px solid;
}<table style="width: 100%;">
<tr>
<td>
<div style="word-wrap: break-word;">
Looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong word
</div>
</td>
<td><span style="display: inline;">Short word</span></td>
</tr>
</table>La palabra larga anterior es más grande que los límites de mi página, pero no rompe con el HTML anterior. Probé las sugerencias a continuación para agregar text-wrap:suppressy text-wrap:normal, pero ninguna ayudó.
Lo siguiente me funciona en Internet Explorer. Tenga en cuenta la adición del table-layout:fixedatributo CSS
td {
border: 1px solid;
}<table style="table-layout: fixed; width: 100%">
<tr>
<td style="word-wrap: break-word">
Looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong word
</td>
<td>Short word</td>
</tr>
</table>
<td style="word-break:break-all;">longtextwithoutspace</td>
o
<span style="word-break:break-all;">longtextwithoutspace</span>
Puedes verificar con Firebug (o similar) que no estás heredando accidentalmente la siguiente regla:
white-space:nowrap;
Esto puede anular el comportamiento de salto de línea especificado y, por lo tanto, romper el ajuste de palabras. (Comentarios de shane lee y Beer Me .) Para solucionar ese problema, puede agregar white-space:normal;estilo.
Resulta que no hay una buena manera de hacer esto. Lo más cerca que estuve fue agregar "overflow:hidden;" al div alrededor de la mesa y perdiendo el texto. Sin embargo, la verdadera solución parece ser deshacerse de la mesa. Usando divs y posicionamiento relativo pude lograr el mismo efecto, menos el legado de<table>
ACTUALIZACIÓN DE 2015: Esto es para aquellos como yo que quieren esta respuesta. Después de 6 años, esto funciona, gracias a todos los contribuyentes.
* { /* this works for all but td */
word-wrap:break-word;
}
table { /* this somehow makes it work for td */
table-layout:fixed;
width:100%;
}