Word-wrap en una tabla HTML

He estado usando word-wrap: break-wordpara envolver texto en divsyspan s. Sin embargo, no parece funcionar en las celdas de la tabla. Tengo una tabla establecida en width:100%, con una fila y dos columnas. El texto en columnas, aunque está diseñado con lo anterior word-wrap, no se ajusta. Hace que el texto pase 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 de arriba es más grande que los límites de mi página, pero no se rompe con el HTML anterior. He intentado las sugerencias a continuación de agregar text-wrap:suppressy text-wrap:normal, pero ninguna me ayudó.

Lo siguiente funciona para mí 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">
      LongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongWord
    </td>
  </tr>
</table>

<td style="word-break:break-all;">longtextwithoutspace</td>

o

<span style="word-break:break-all;">longtextwithoutspace</span>

Una posibilidad remota, pero verifique con Firebug (o similar) que no está heredando accidentalmente la siguiente regla:

white-space:nowrap;

Esto puede anular su comportamiento de salto de línea especificado.

Resulta que no hay una buena manera de hacer esto. Lo más cerca que llegué es agregar "desbordamiento: oculto"; al div alrededor de la mesa y perdiendo el texto. Sin embargo, la verdadera solución parece ser abandonar la mesa. Usando divs y posicionamiento relativo pude lograr el mismo efecto, menos el legado de<table>

ACTUALIZACIÓN 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%;
}

Como se mencionó, poner el texto dentro de divcasi funciona. Solo tiene que especificar el widthdediv , que es una suerte para los diseños que son estáticos.

Esto funciona en FF 3.6, IE 8, Chrome.

<td>
  <div style="width: 442px; word-wrap: break-word">
    <!-- Long Content Here-->
  </div>
</td>

Solución alternativa que utiliza overflow-wrap y funciona bien con un diseño de tabla normal + ancho de tabla 100%

https://jsfiddle.net/krf0v6pw/

HTML

<table>
  <tr>
    <td class="overflow-wrap-hack">
      <div class="content">
        wwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwww
      </div>
    </td>
  </tr>
</table>

CSS

.content{
  word-wrap:break-word; /*old browsers*/
  overflow-wrap:break-word;
}

table{
  width:100%; /*must be set (to any value)*/
}

.overflow-wrap-hack{
  max-width:1px;
}

Beneficios:

• Usos en overflow-wrap:break-wordlugar deword-break:break-all . Lo cual es mejor porque primero trata de romper espacios, y corta la palabra solo si la palabra es más grande que su contenedor.
• No es table-layout:fixednecesario Use su tamaño automático habitual.
• No es necesario definir fijo widtho fijo max-widthen píxeles. Definir %el padre si es necesario.

Probado en FF57, Chrome62, IE11, Safari11

Cambia tu código

word-wrap: break-word;

a

word-break:break-all;

Ejemplo

<table style="width: 100%;">
  <tr>
    <td>
      <div style="word-break:break-all;">longtextwithoutspacelongtextwithoutspace Long Content, Long Content, Long Content, Long Content, Long Content, Long Content, Long Content, Long Content, Long Content, Long Content</div>
    </td>
    <td><span style="display: inline;">Short Content</span>
    </td>
  </tr>
</table>

Problema con

<td style="word-break:break-all;">longtextwithoutspace</td>

es que no funcionará tan bien cuando el texto tenga algunos espacios, p. ej.

<td style="word-break:break-all;">long text with andthenlongerwithoutspaces</td>

Si la palabra andthenlongerwithoutspacesencaja en la celda de la tabla en una línea pero long text with andthenlongerwithoutspacesno, la palabra larga se dividirá en dos, en lugar de estar ajustada.

Solución alternativa: inserte U + 200B ( ZWSP ), U + 00AD ( guión suave ) o U + 200C ( ZWNJ ) en cada palabra larga después de cada, digamos 20 caracteres (sin embargo, vea la advertencia a continuación):

td {
  border: 1px solid;
}

<table style="width: 100%;">
  <tr>
    <td>
      <div style="word-wrap: break-word;">
        Looooooooooooooooooo&#xAD;oooooooooooooooooooo&#xAD;oooooooooooooooooooo&#xAD;oooooooooooooooooooo&#xAD;oooooooooooooooooooo&#xAD;oooooooooooooooooooo&#xAD;oooooooooooooooooooo&#xAD;oooooooooooooooooooo&#xAD;oooooooooooooooooooo&#xAD;oooooooooooooong word
      </div>
    </td>
    <td><span style="display: inline;">Short word</span></td>
  </tr>
</table>

Advertencia : la inserción de caracteres adicionales de longitud cero no afecta la lectura. Sin embargo, afecta el texto copiado en el portapapeles (estos caracteres, por supuesto, también se copian). Si el texto del portapapeles se usa más tarde en alguna función de búsqueda en la aplicación web ... la búsqueda se interrumpirá. Aunque esta solución se puede ver en algunas aplicaciones web bien conocidas, evítela si es posible.

Advertencia : al insertar caracteres adicionales, no debe separar varios puntos de código dentro del grafema. Consulte https://unicode.org/reports/tr29/#Grapheme_Cluster_Boundaries para obtener más información.

Mira esta demo

   <table style="width: 100%;">
    <tr>
        <td><div style="word-break:break-all;">LongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWord</div>
        </td>
        <td>
            <span style="display: inline;">Foo</span>
        </td>
    </tr>
</table>

Aquí está el enlace para leer

Probado en IE 8 y Chrome 13.

<table style="table-layout: fixed; width: 100%">
    <tr>
        <td>
              <div style="word-wrap: break-word;">
                 longtexthere
              </div>
        </td>
        <td><span style="display: inline;">Foo</span></td>
    </tr>
</table>

Esto hace que la tabla se ajuste al ancho de la página y que cada columna ocupe el 50% del ancho.

Si prefiere la primera columna para ocupar más de la página, añadir una width: 80%a la tdcomo en el siguiente ejemplo, la sustitución de 80% con el porcentaje de su elección.

<table style="table-layout: fixed; width: 100%">
    <tr>
        <td style="width:80%">
               <div style="word-wrap: break-word;">
                 longtexthere
               </div>
            </td>
        <td><span style="display: inline;">Foo</span></td>
    </tr>
</table>

Lo único que debe hacerse es agregar ancho al interior <td>o al <div>interior <td>según el diseño que desee lograr.

p.ej:

<table style="width: 100%;" border="1"><tr>
<td><div style="word-wrap: break-word; width: 100px;">looooooooooodasdsdaasdasdasddddddddddddddddddddddddddddddasdasdasdsadng word</div></td>
<td><span style="display: inline;">Foo</span></td>
</tr></table>

o

 <table style="width: 100%;" border="1"><tr>
    <td width="100" ><div style="word-wrap: break-word; ">looooooooooodasdsdaasdasdasddddddddddddddddddddddddddddddasdasdasdsadng word</div></td>
    <td><span style="display: inline;">Foo</span></td>

</tr></table>

La respuesta que ganó la recompensa es correcta, pero no funciona si la primera fila de la tabla tiene una celda fusionada / unida (todas las celdas tienen el mismo ancho).

En este caso, debe usar las etiquetas colgroupy colpara mostrarlo correctamente:

<table style="table-layout: fixed; width: 200px">
<colgroup>
    <col style="width: 30%;">
    <col style="width: 70%;">
</colgroup>
<tr>
    <td colspan="2">Merged cell</td>
</tr>
<tr>
    <td style="word-wrap: break-word">VeryLongWordInThisCell</td>
    <td style="word-wrap: break-word">Cell 2</td>
</tr>
</table>

<p style="overflow:hidden; width:200px; word-wrap:break-word;">longtexthere<p>

Parece que necesita establecer word-wrap:break-word;un elemento de bloque ( div), con un ancho especificado (no relativo). Ex:

<table style="width: 100%;"><tr>
    <td><div style="display:block; word-wrap: break-word; width: 40em;">loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong word</div></td>
    <td><span style="display: inline;">Foo</span></td>
</tr></table>

o usando word-break:break-allla sugerencia de Abhishek Simon.

Esto funciona para mi:

<style type="text/css">
    td {

        /* CSS 3 */
        white-space: -o-pre-wrap;
        word-wrap: break-word;
        white-space: pre-wrap;
        white-space: -moz-pre-wrap;
        white-space: -pre-wrap;
    }

Y el atributo de la tabla es:

   table {
      table-layout: fixed;
      width: 100%
   }

</style>

Si no necesita un borde de tabla, aplique esto:

table{
    table-layout:fixed;
    border-collapse:collapse;
}
td{
    word-wrap: break-word;
}

Encontré una solución que parece funcionar en Firefox, Google Chrome e Internet Explorer 7-9. Para hacer un diseño de tabla de dos columnas con texto largo en un lado. Busqué un problema similar en todas partes, y lo que funcionó en un navegador rompió el otro, o agregar más etiquetas a una tabla parece una mala codificación.

NO utilicé una tabla para esto. DL DT DD al rescate. Al menos para arreglar un diseño de dos columnas, eso es básicamente una configuración de glosario / diccionario / significado de palabras.

Y algo de estilo genérico.

    dl {
        margin-bottom:50px;
    }

    dl dt {
        background:#ccc;
        color:#fff;
        float:left;
        font-weight:bold;
        margin-right:10px;
        padding:5px;
        width:100px;
    }

    dl dd {
        margin:2px 0;
        padding:5px 0;
        word-wrap:break-word;
        margin-left:120px;
    }

<dl>
    <dt>test1</dt>
    <dd>Fusce ultricies mi nec orci tempor sit amet</dd>
    <dt>test2</dt>
    <dd>Fusce ultricies</dd>
    <dt>longest</dt>
    <dd>
        Loremipsumdolorsitametconsecteturadipingemipsumdolorsitametconsecteturaelit.Nulla
        laoreet ante et turpis vulputate condimentum. In in elit nisl. Fusce ultricies
        mi nec orci tempor sit amet luctus dui convallis. Fusce viverra rutrum ipsum,
        in sagittis eros elementum eget. Class aptent taciti sociosqu ad litora
        torquent per conubia nostra, per.
    </dd>
</dl>

Utilizando el ajuste flotante y el margen izquierdo, obtuve exactamente lo que necesitaba. Solo pensé en compartir esto con otros, tal vez ayude a alguien más con un diseño de estilo de definición de dos columnas, con problemas para que las palabras se ajusten.

Intenté usar word-wrap en la celda de la tabla, pero solo funcionó en Internet Explorer 9 (y Firefox y Google Chrome, por supuesto) principalmente tratando de arreglar el navegador roto de Internet Explorer aquí.

Las tablas se ajustan de forma predeterminada, así que asegúrese de que la visualización de las celdas de la tabla sea table-cell:

td {
   display: table-cell;
}

style = "table-layout: fixed; width: 98%; word-wrap: break-word"

<table bgcolor="white" id="dis" style="table-layout:fixed; width:98%; word-wrap:break-word" border="0" cellpadding="5" cellspacing="0" bordercolordark="white" bordercolorlight="white" >

Demostración: http://jsfiddle.net/Ne4BR/749/

Esto funciono muy bien para mi. Tenía enlaces largos que harían que la tabla superara el 100% en los navegadores web. Probado en IE, Chrome, Android y Safari.

Una solución que funciona con Google Chrome y Firefox (no probado con Internet Explorer) es establecer display: table-cellcomo un elemento de bloque.

Puedes probar esto si te conviene ...

Coloque un área de texto dentro de su td y desactívelo con el color de fondo blanco y defina su número de filas.

<table style="width: 100%;">
  <tr>
    <td>
        <textarea rows="4" style="background-color:white;border: none;" disabled>      Looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong word
      </textarea>
    </td>
    <td><span style="display: inline;">Short word</span></td>
  </tr>
</table>