Configurando el espaciado entre líneas y permitiendo el corte de palabras
Debería tener una pregunta muy fácil aquí. Tengo una tabla y quiero establecer la altura de línea de cada celda en un 8%. También tengo la opción de salto de línea activada. Si el ancho de la página se reduce, el texto se superpone (porque establecí explícitamente la altura de línea). Vea la implementación del código:
table, th, td {
font-size: 12px;
font-weight: 450;
word-break: break-word;
line-height: 8%;
margin-bottom: 8%;
}
Ejemplo:
Como puedes ver, el texto se superpone. Aunque quiero asignar explícitamente la altura de línea, también quiero que las celdas se expandan si el texto se mueve a dos líneas. Como puedes ver en el archivo CSS, intenté usar margin-bottom pero sin suerte. Se agradece cualquier sugerencia. ¡Gracias de antemano!
Esto solucionó mi problema:
tr, th, td {
font-weight: 450;
font-size: 11px;
word-break: break-word;
line-height: 90%;
}
davy.ai
Para evitar la superposición de texto en una tabla mientras se establece explícitamente la altura de línea, una posible solución es utilizar un valor porcentual para la altura de línea que permita aumentar la altura de la celda cuando el texto se ajuste a varias líneas. Además, se pueden ajustar las propiedades de tamaño de fuente y salto de palabra para mejorar la legibilidad de la tabla.
En el ejemplo proporcionado, cambiar la altura de línea al 90% y ajustar el tamaño de fuente a 11px proporciona más espacio para que el texto se ajuste, manteniendo al mismo tiempo la altura de línea deseada. La propiedad de salto de palabra también se puede establecer en “break-word” para permitir que las palabras largas se rompan y se ajusten a la línea siguiente sin desbordar la celda de la tabla.
El código CSS actualizado debería verse así:
Al realizar estos cambios, el texto de la tabla debería ajustarse y expandirse verticalmente según sea necesario para evitar la superposición y mantener la legibilidad.