Word-wrap en una tabla HTML

566

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ó.

psicotik
fuente
agregue guión duro. <tr> <td style = "text-wrap: normal; word-wrap: break-word"> Esta es una presentación. </td> </tr>
adatapost
Desafortunadamente, el texto allí proviene del contenido generado por el usuario. Por supuesto, podría preprocesarlo y agregar el guión, pero esperaba que hubiera una mejor manera.
psychotik
Pido disculpas por usar la palabra 'guión duro'. En HTML, el guión simple está representado por el carácter "-" (& # 45; o & # x2D;). El guión suave está representado por la referencia de entidad de carácter & shy; (& # 173; o & # xAD;)
adatapost
¿Realmente estás usando <code>break-wor<em>k</em> </code>? Tal vez eso podría tener algo que ver con eso.
Ms2ger
1
Si está aquí, es posible que desee ver también white-space: pre-wrap developer.mozilla.org/en-US/docs/Web/CSS/white-space
Tom Prats

Respuestas:

624

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>

Marc Stober
fuente
@ewomac sí, a veces solo tengo que ignorar los errores de VS2010 sobre HTML / CSS si sé que funcionará en el navegador.
Marc Stober
2
@¡¡bagazo!! amigo, muchas gracias por esto. Me encargaron crear una versión móvil de un sitio de cliente que usa tablas, ¡y estaba teniendo problemas para que esto funcione! table-layout: fixed hizo el truco!
depurar el
17
Esto hace que las otras columnas sean demasiado anchas.
Clément
2
Asegúrese de leer developer.mozilla.org/en-US/docs/Web/CSS/table-layout Los anchos de tabla y columna se establecen por el ancho de los elementos de tabla y columna o por el ancho de la primera fila de celdas. Las celdas en las filas posteriores no afectan el ancho de las columnas. Parece que esto también es bueno para el rendimiento.
Sam Barnum
2
@ Clément vea la respuesta de Indrek a continuación sobre <colgroup>, me arregló esto.
andrewtweber
164
<td style="word-break:break-all;">longtextwithoutspace</td>

o

<span style="word-break:break-all;">longtextwithoutspace</span>
Pratik Stephen
fuente
Puede confirmar que el enfoque de Pratik también funciona en Safari en iOS (iPhone).
Oculus
Para solucionar el problema con algunas palabras cortas y algunas largas, podría preprocesar el texto y ajustar solo palabras largas (por ejemplo,> 40 caracteres) en el <span>.
nornagon
99
esto no es compatible con firefox, opera
meotimdihia
55
esto no se rompió preferentemente en caracteres que no son palabras (por ejemplo, si tuviera una serie de palabras más cortas separadas por espacios, siempre correría las palabras hasta la línea, luego dividiría la última palabra por la mitad). Word-wrap
separará
Este enfoque es mejor porque no requiere table-layout: fixed;.
Finesse
125

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.

Rick Grundy
fuente
Esto es lo que se heredó y rompió la palabra para mí
Shane Lee
@RickGrundy ¿A qué lo cambias si tienes ese problema?
cokedude
77
@cokedude Estoy demasiado tarde aquí, pero eswhite-space:normal;
Beer Me
46

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%;
}
psicotik
fuente
29

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>
tumbona
fuente
2
Puede agregar min-width: 100%junto con widthpara asegurarse de que divocupa toda la celda.
user1091949
Quiero hacer un ajuste de palabra con coma (,). Al igual Long,Long,Long,Long,Long. Quiero terminar esto después de cualquier coma (,).
Karthikeyan
20

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

Alph.Dev
fuente
Si bien este truco parece funcionar en todos los navegadores, tenga en cuenta que la especificación CSS no garantiza esto. Según w3.org/TR/CSS21/visudet.html#propdef-max-width , "el efecto de 'ancho mínimo' y 'ancho máximo' en tablas, tablas en línea, celdas de tabla, columnas de tabla y grupos de columnas es indefinido " .
Mark Amery el
17

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>

Duc Nguyen
fuente
-1; Esto hace que el navegador ignore por completo los saltos de palabras y se rompa en el medio de las palabras, incluso si no es necesario. Ese comportamiento rara vez es deseable y presumiblemente no es el comportamiento que el OP quería, o de lo contrario no habrían estado usando break-worden primer lugar.
Mark Amery el
16

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.

Piotr Findeisen
fuente
Quizás el resultado de esto sea ligeramente mejor si, en palabras suficientemente largas, inserta un guión suave después de cada carácter, de modo que el navegador pueda romper la palabra de manera confiable en el borde derecho del elemento contenedor.
Mark Amery el
Si bien esta es una solución viable, la sugerencia aparentemente inofensiva de agregar algo "después de cada, digamos, el vigésimo personaje" está llena de trampas si desea hacerlo mediante programación en su servidor. Iterar sobre los caracteres de una cadena Unicode es difícil en la mayoría de los lenguajes de programación. En el mejor de los casos , un lenguaje puede facilitar la iteración sobre puntos de código Unicode, pero esos no son necesariamente lo que nos gustaría llamar "caracteres" (por ejemplo, pueden escribirse como dos puntos de código). Probablemente realmente queremos decir "grafemas", pero no conozco ningún lenguaje que haga que sea trivial recorrerlos.
Mark Amery el
1
@ MarkAmery tienes razón. Sin embargo, incluso con ASCII simple, esto no es genial. Agregué "advertencias".
Piotr Findeisen
14

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

AabinGunz
fuente
-1; el uso break-allhará que el navegador ignore por completo los saltos de palabra cuando decida dónde colocar saltos de línea, con el efecto de que incluso si su celda contiene prosa normal sin palabras muy largas, terminará con saltos de línea en el medio de las palabras. Esto es típicamente indeseable.
Mark Amery el
10

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>
Waylon Flinn
fuente
10

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>
Shalom Sam
fuente
1
Básicamente, esto solo repite lo que la respuesta de loungerdork ya dijo meses antes sin agregar ninguna información o información nueva.
Mark Amery el
Me
funcionó
8

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>
Indrek
fuente
8
<p style="overflow:hidden; width:200px; word-wrap:break-word;">longtexthere<p>
Sarawut Positwinyu
fuente
1
-1 tanto por la falta de explicación como por la mala solución. Poner el contenido dentro de un ancho de píxel fijo pdentro de una celda de la tabla que no tiene un ancho de píxel fijo seguramente terminará pdesbordándose o no llenando la celda de la tabla.
Mark Amery el
8

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.

Stslavik
fuente
5

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>
Lavekush Agrawal
fuente
Al igual que muchas otras respuestas, la clave aquí que lo hace funcionar es usar table-layout: fixed, pero ya hay una respuesta mucho más antigua que sugiere eso, por lo que esta respuesta no agrega ninguna información nueva.
Mark Amery el
4

Si no necesita un borde de tabla, aplique esto:

table{
    table-layout:fixed;
    border-collapse:collapse;
}
td{
    word-wrap: break-word;
}
Fusión
fuente
Ya hay una respuesta mucho más antigua que sugiere usar table-layout: fixed; este no agrega nada nuevo a la página.
Mark Amery el
4

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í.

Yogurt The Wise
fuente
2

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;
}
ironsam
fuente
-1; el texto de cualquier elemento HTML se ajusta de manera predeterminada, no solo las tablas. La sugerencia aquí realmente no tiene ningún sentido.
Mark Amery
1

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.

Poli
fuente
Esto es básicamente un duplicado como la respuesta más votada ; En ambos casos, la solución se reduce a "uso table-layout: fixed".
Mark Amery el
0

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

Antoine Guiral
fuente
0

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>
Adarsh ​​Singh
fuente