HTML wrap wrap text

Quiero envolver un texto que se agrega a un elemento

. Lo he intentado con style="word-wrap: break-word;" width="15%" style="word-wrap: break-word;" width="15%" . Pero no está envolviendo el texto. ¿Es obligatorio darle el 100% de ancho? Tengo otros controles para mostrar, por lo que solo está disponible el 15% de ancho.

Para envolver texto TD

Primer conjunto de estilo de tabla

 table{ table-layout: fixed; } 

luego configura el estilo TD

 td{ word-wrap:break-word } 

Las tablas HTML admiten un estilo CSS “de diseño de tabla: fijo” que evita que el agente de usuario adapte el ancho de las columnas a su contenido. Es posible que desee usarlo.

Creo que te has encontrado con la captura 22 de tablas. Las tablas son geniales para completar el contenido en una estructura tabular y hacen un trabajo maravilloso de “estiramiento” para satisfacer las necesidades del contenido que contienen.

De forma predeterminada, las celdas de la tabla se estirarán para ajustarse al contenido … por lo tanto, su texto simplemente lo amplía.

Hay algunas soluciones.

1.) Puede intentar establecer un ancho máximo en el TD.

  

2.) Puedes intentar poner tu texto en un elemento de envoltura (por ejemplo, un lapso) y establecer restricciones sobre él.

 Hello World... 

Tenga en cuenta que las versiones anteriores de IE no admiten min / max-width.

Dado que IE no admite el ancho máximo de forma nativa, necesitarás agregar un truco si quieres forzarlo. Hay varias formas de agregar un truco, este es solo uno.

En la carga de página, solo para IE6, obtenga el ancho renderizado de la tabla (en píxeles), luego obtenga 15% de eso y aplique eso como el ancho al primer TD en esa columna (o TH si tiene encabezados) nuevamente, en píxeles .

table-layout:fixed resolverá el problema de celda en expansión, pero creará uno nuevo. IE de forma predeterminada ocultará el desbordamiento, pero Mozilla lo representará fuera del cuadro.

Otra solución sería usar: overflow:hidden;width:?px

 
fearofthedarkihaveaconstantfearofadark test
 .tbl { table-layout:fixed; border-collapse: collapse; background: #fff; } .tbl td { text-overflow:ellipsis; overflow:hidden; white-space:nowrap; } 

Créditos a http://www.blakems.com/archives/000077.html

Esto funcionó para mí con algunos marcos CSS (material design lite [MDL]).

 table { table-layout: fixed; white-space: normal!important; } td { word-wrap: break-word; } 

Para que el ancho de celda sea exactamente igual a la palabra más larga del texto, simplemente configure el ancho de la celda en 1px

es decir

 td { width: 1px; } 

Esto es experimental y me enteré de esto mientras hacía prueba y error

Violín en vivo: http://jsfiddle.net/harshjv/5e2oLL8L/2/

Esto funciona realmente bien:

 
your text

Puede usar el mismo ancho para todos sus , o ajustar el ancho en cada caso para dividir su texto donde desee.

De esta forma, no tiene que perder el tiempo con anchos de tabla fijos o css complejos.

Es posible que esto funcione, pero podría ser un poco molesto en algún momento en el futuro (si no inmediatamente).

  ... ......
some text some more text yet more text

El razonamiento para el span es que, como han señalado otros, un

generalmente se expandirá para acomodar el contenido, mientras que un se le puede dar -y se espera que lo mantenga- un ancho fijo; el overflow: hidden tiene como objective ocultar, pero no ocultar, lo que de lo contrario haría que

expandiera.

Recomiendo usar la propiedad del title del tramo para mostrar el texto que está presente (o recortado) en la celda visual, de modo que el texto aún esté disponible (y si no quiere / necesita personas para verlo, entonces ¿por qué en primer lugar, supongo …).

Además, si defines un ancho para el td {...} el td se expandirá (o potencialmente se contraerá, pero lo dudo) para llenar su ancho implícito (como yo lo veo, esto parece ser table-width/number-of-cells ), un ancho de tabla especificado no parece crear el mismo problema.

La desventaja es el marcado adicional utilizado para la presentación.

En realidad, el ajuste del texto ocurre automáticamente en las tablas. Las personas que cometen errores se comprometen mientras las pruebas hipotéticamente suponen una cadena larga como “ggggggggggggggggggggggggggggggggggggggggggggggg” y se quejan de que no se ajusta. Prácticamente no hay una palabra en inglés que sea así de larga e incluso si la hay, hay una pequeña posibilidad de que se use dentro de esa

.

Prueba con oraciones como “Contraposicionar es supersticioso en circunstancias predeterminadas”.

Aplique las clases a sus TD, aplique los anchos apropiados (recuerde dejar uno de ellos sin ancho para que asum el rest del ancho), luego aplique los estilos apropiados. Copie y pegue el código siguiente en un editor y visualícelo en un navegador para ver cómo funciona.

     Untitled Document    
This is the left column. It is set to 20% width.

Hi,

I want to wrap a text that is added to the TD. I have tried with style="word-wrap: break-word;" width="15%". But the wrap is not happening. Is it mandatory to give 100% width ? But I have got other controls to display so only 15% width available.

Need help.

TIA.

This is the right column, it has no width so it assumes the remainder from the 15% and 20% assumed by the others. By default, if a width is applied and no white-space declarations are made, your text will automatically wrap.
       
Poem Poem
Never increase, beyond what is necessary, the number of entities required to explain anything Never increase, beyond what is necessary, the number of entities required to explain anything

The nowrap attribute is not supported in HTML5. Use CSS instead.

use word-break se puede usar sin estilo de table para table-layout: fixed

 table { width: 140px; border: 1px solid #bbb } .tdbreak { word-break: break-all } 
 

without word-break

LOOOOOOOOOOOOOOOOOOOOOOOOOOOOGGG

with word-break

LOOOOOOOOOOOOOOOOOOOOOOOOOOOOOGGG