imagenes - tablas html

Ajuste de palabra en una tabla HTML

Question

He estado usando word-wrap: break-word para envolver texto en div sy span s. Sin embargo, no parece funcionar en celdas de tabla. Tengo una tabla configurada al width:100% , con una fila y dos columnas. El texto en columnas, aunque está estilizado con el ajuste de word-wrap anterior, 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 align="left">
<div style="word-wrap: break-word;">Long Content</div>
</td>
<td align="right"><span style="display: inline;">Short Content</span>
</td>
</tr>
</table>

"Contenido largo" 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:suppress y text-wrap:normal , pero ninguno ayudó.

Answer 1

Solución que utiliza el ajuste de desbordamiento y funciona bien con el diseño normal de la tabla + ancho de la 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:

• Utiliza overflow-wrap:break-word lugar de word-break:break-all . Lo que es mejor porque trata de romper espacios primero y corta la palabra solo si la palabra es más grande que el contenedor.
• Sin table-layout:fixed necesita table-layout:fixed solución table-layout:fixed . Utilice su auto-dimensionamiento regular.
• No es necesario para definir width fijo o width max-width fijo en píxeles. Defina el % del padre si es necesario.

Probado en FF57, Chrome62, IE11, Safari11

Answer 2

Cambia tu codigo

word-wrap: break-word;

a

word-break:break-all;

Ejemplo

<table style="width: 100%;">
<tr>
<td align="left">
<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 align="right"><span style="display: inline;">Short Content</span>
</td>
</tr>
</table>

Answer 3

Como se mencionó, poner el texto dentro de div casi funciona. Solo tienes que especificar el width del div , que es afortunado diseños 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>

Answer 4

Echa un vistazo a esta demostración

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

Aquí está el enlace para read

Answer 5

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é por todos lados un problema similar, y lo que funcionó en un navegador rompió al otro, o agregar más etiquetas a una tabla simplemente parece una mala codificación.

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

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

Y un 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;
}

Usando el ajuste de texto flotante y el margen izquierdo, obtuve exactamente lo que necesitaba. Pensé que compartiría esto con otros, tal vez ayudaría 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 el ajuste de palabras en la celda de la tabla, pero solo funcionó en Internet Explorer 9, (y Firefox y Google Chrome, por supuesto), principalmente tratando de corregir el navegador de Internet Explorer aquí.

Answer 6

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

Answer 7

Esto funciona para mí:

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

Answer 8

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

En este caso, debe utilizar las etiquetas colgroup y col para 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>

Answer 9

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;
}

Answer 10

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

p.ej:

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

o

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

Answer 11

Lo siguiente funciona para mí en Internet Explorer. Tenga en cuenta la adición de la table-layout:fixed atributo CSS table-layout:fixed

td {
border: 1px solid;
}

<table style="table-layout: fixed; width: 100%">
<tr>
<td style="word-wrap: break-word">
LongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongWord
</td>
</tr>
</table>

Answer 12

Parece que necesitas configurar el ajuste de word-wrap:break-word; en un elemento de bloque ( div ), con ancho especificado (no relativo). Ex:

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

o usando word-break:break-all según la sugerencia de Abhishek Simon.

Answer 13

Probado en IE 8 y Chrome 13.

<table style="table-layout: fixed; width: 100%">
<tr>
<td align="left">
<div style="word-wrap: break-word;">
longtexthere
</div>
</td>
<td align="right"><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 que la primera columna ocupe más de la página, agregue un width: 80% a la td como en el siguiente ejemplo, reemplazando el 80% con el porcentaje de su elección.

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

Answer 14

Problema con

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

es que no funcionará tan bien cuando el texto tenga algunos espacios, por ejemplo,

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

Si la palabra y el ya sin andthenlongerwithoutspaces en la celda de la tabla en una línea, pero el long text with andthenlongerwithoutspaces ya no long text with andthenlongerwithoutspaces no, la palabra larga se long text with andthenlongerwithoutspaces en dos, en lugar de incluirse.

Solución alternativa: inserte U + 200B ( ZWSP ), U + 00AD ( guión suave ) o U + 200C ( ZWNJ ) en cada palabra larga después de cada 20 caracteres.

Answer 15

Resulta que no hay una buena manera de hacer esto. Lo más cercano que vine es agregar "desbordamiento: oculto"; Al div alrededor de la mesa y perdiendo el texto. 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 2015: Esto es para aquellos como yo que quieren esta respuesta. Después de 6 años, esto funciona, gracias a todos los colaboradores.

* { // this works for all but td
word-wrap:break-word;
}
table { // this somehow makes it work for td
table-layout:fixed;
width:100%;
}

Answer 16

Si no necesita un borde de tabla, aplique esto:

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

Answer 17

Texto de http://www.w3.org/TR/css3-text/#word-wrap

Esta propiedad especifica si el UA puede romperse dentro de una palabra para evitar el desbordamiento cuando una cadena que no se puede romper es demasiado larga para caber dentro del cuadro de línea. Sólo tiene un efecto cuando ''text-wrap'' es ''normal'' o ''suprimir''. Valores posibles

Answer 18

Una solución que funciona con Google Chrome y Firefox (no probada con Internet Explorer) es configurar display: table-cell como un elemento de bloque.

Answer 19

style = "diseño de tabla: fijo; ancho: 98%; ajuste de palabra: palabra de descanso"

<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

Answer 20

_{Por la falta de fragmentos de código ejecutables:}

Sin estilos

td {
border: 1px solid gold;
}

<table>
<tr>
<td>
LongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongWord
</td>
</tr>
</table>

Usando table-layout: fixed para table y word-wrap: break-word para td ( la respuesta de Marc Stober )

td {
border: 1px solid gold;
}

<table style="table-layout: fixed; width: 100%">
<tr>
<td style="word-wrap: break-word">
LongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongWord
</td>
</tr>
</table>

Usando word-break: break-all ( respuesta de Pratik Stephen )

td {
border: 1px solid gold;
}

<table>
<tr>
<td style="word-break: break-all">
LongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongWord
</td>
</tr>
</table>

Answer 21

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

Answer 22

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

o

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