css - para - Envoltura de palabras de una celda de tabla larga mientras se mantienen los anchos dinámicos en otras
tablas en html5 (4)
Puede usar: el estilo word-wrap css para romper las oraciones largas.
word-wrap: break-word
Tengo una tabla que tiene una línea larga en una de sus celdas. Necesito que la línea larga se divida para que no cause que la mesa tenga más del 100% de ancho. Encontré que al agregar table-layout: fixed y word-wrap: word-break , se ajustará la celda larga. Sin embargo, un efecto secundario del uso de table-layout es que causa que todas las columnas tengan el mismo ancho.
Puedes ver un ejemplo de eso aquí:
¿Cómo puedo hacer que el ancho automático de la primera columna se ajuste únicamente a su contenido? (es decir, en este ejemplo, debe ser lo suficientemente amplio como para mostrar el 1 y 2 en esa columna).
Los datos en la tabla se cargarán dinámicamente, por lo que una solución que codifica los valores de ancho de los códigos no es buena porque no hay manera de saber de antemano qué ancho debe tener una columna. Mi única opción es usar una <table> , no puedo usar un <div> o algún otro elemento.
De acuerdo con la especificación oficial , cuando usa un table-layout fijo, los anchos de columna de la primera fila determinan los anchos de columna de toda la tabla. Si ninguno de ellos está definido, distribuirá los anchos de columna de manera uniforme.
Como no parece haber otra opción, terminé usando el siguiente método:
- Cargando los datos en la tabla mientras el
table-layoutlatable-layoutse establece en automático. - Al leer el ancho de las columnas, quiero ser dinámico.
- Establecer esos anchos de columna a sus valores actuales.
- Cambiar el
table-layoutlatable-layouta fijo.
Aquí hay un ejemplo que no es perfecto (el ancho se reduce un poco):
Lo descubrí mientras luchaba con el mismo problema:
El ajuste de palabra de ruptura en un elemento corresponde exactamente a la inserción de un espacio de ancho cero entre cada carácter del texto contenido dentro de ese elemento.
¡Excepto que esto realmente funciona con tablas dinámicas normales!
Esta solución es muy rápida, ya que no requiere Javascript.
(Sin embargo, si se desea, se puede usar desde Javascript. Encuentra todas las celdas con la palabra clave, toma todos los nodos de texto secundarios e inserta un espacio de ancho cero entre cada carácter. Incluso entonces, la secuencia de comandos se ejecutará solo una vez durante la carga de página, así que esto debería ser extremadamente eficiente.)
El espacio de ancho cero es ​
Es fácil de manejar / ajustar palabras largas en DIV y tablas fijas ( table-layout: fixed ) - solo aplica CSS3 word-wrap: break-words .
Dentro de las tablas dinámicas anteriores, la propiedad solo hace la mitad del trabajo. Necesitamos además ayudar a los navegadores a encontrar puntos de quiebre.
Se puede encontrar una explicación un poco más detallada en el artículo Ajustar palabras largas dentro de tablas dinámicas .