content - css wrap text in div

Usar "word-wrap: break-word" dentro de una tabla

Question

Posible duplicado:
Word-wrap en una tabla html

Este texto se comporta exactamente de la manera que quiero en Google Chrome (y otros navegadores modernos):

<div style="border: 1px solid black; width:100%; word-wrap: break-word;">
<p>
aaaaaaaaaaaaaaaa
bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb
</p>
</div>

1. Cuando el navegador es lo suficientemente ancho, a + y b + están en la misma línea.

   aaaaaaaaaaaaaaaa bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb

2. A medida que estrecha el navegador, a + y b + se ponen en líneas separadas.

   aaaaaaaaaaaaaaaa
   bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb

3. Cuando b + ya no puede caber, se rompe y se coloca en dos líneas (para un total de tres líneas).

   aaaaaaaaaaaaaaaa
   bbbbbbbbbbbbbbbbbbbbbbbb
   bbbbbbbb

Eso es genial.

En mi situación, sin embargo, esto no es un div sino una table , así:

<table style="border:1px solid black; width:100%; word-wrap:break-word;">
<tr>
<td>
<p>
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb
</p>
</td>
</tr>
</table>

En este caso, # 1 y # 2 suceden, pero no # 3. Es decir, la tabla deja de estrecharse después del paso 2 y el paso 3 nunca ocurre. La palabra clave no parece filtrarse.

¿Alguien sabe cómo hacer que el # 3 suceda? La solución solo necesita trabajo en Chrome, pero también funcionó en otros navegadores que sería incluso mejor.

PD: "No usar tablas" no es útil.

Answer 1

Puedes intentar esto:

td p {word-break:break-all;}

Esto, sin embargo, lo hace aparecer así cuando hay suficiente espacio, a menos que agregue una etiqueta <br> :

aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb

Por lo tanto, sugeriría agregar etiquetas <br> donde haya nuevas líneas, si es posible.

aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb

http://jsfiddle.net/LLyH3/3/

Además, si esto no resuelve tu problema, aquí hay un hilo similar.

Answer 2

table-layout: fixed obtendrá forzar las celdas para que se ajusten a la tabla (y no al revés), por ejemplo:

<table style="border: 1px solid black; width: 100%; word-wrap:break-word;
table-layout: fixed;">
<tr>
<td>
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb
</td>
</tr>
</table>