0
294
VistasCreación de varias columnas a partir de texto desbordado
Estoy buscando una manera de dividir dinámicamente un texto continuo en varias columnas solo si el contenido de la primera columna se desborda. Debe ser receptivo y funcionar para cualquier ancho de dispositivo. La solución puede ser (S)css o JavaScript.
Ya intenté usar column-count como se sugiereaquí, pero esto siempre crea varias columnas sin importar si todavía hay suficiente espacio en la primera columna.
Esto es lo que quiero lograr solo sin el column-count mencionado
.content { height: 90vh; } .text { width: 300px; column-count: 2; } <div class="content"> <div class="text"> Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. Cras ultricies ligula sed magna dictum porta. Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui. Nulla porttitor accumsan tincidunt. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque in ipsum id orci porta dapibus. Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a. Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. </div> </div>
·
Juan Pablo Isaza
2 Respuestas
Responde la pregunta0
Debe establecer la height en .text para que sepa cuándo pasar a la siguiente columna:
.content { height: 90vh; } .text { height:100%; width: 300px; column-count: 1; } <div class="content"> <div class="text"> Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. Cras ultricies ligula sed magna dictum porta. Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui. Nulla porttitor accumsan tincidunt. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque in ipsum id orci porta dapibus. Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a. Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. </div> </div>
·
Juan Pablo Isaza
Denunciar
0
Esto es bastante complicado, pero creo que puede hacerlo en JS calculando el tamaño del texto y luego modificando column-count si excede un cierto valor. Algo como:
const textElement = document.getElementsByClassName('text')[0]; const textElementHeight = textElement.getBoundingClientRect().height const numColumns = textElementHeight / SOME_CONSTANT; textElement.style.columnCount = numColumns
·
Juan Pablo Isaza
Denunciar
Responde la pregunta