Estoy haciendo una página dinámica, a la cual se agrega textos y me gustaría que me ayudaran porque necesito que cuando hagan bastante texto se vaya poniendo en varias columnas. ¿Cómo puedo hacer eso?
.contenedor {
width: 100%;
position: relative;
display: inline-block;
}
.img2 {
width: 100%;
height: 530px;
}
.text-top {
height: auto;
position: absolute;
top: 50px;
color: white;
left: 60px;
background: rgba(216, 38, 38, 0.253);
width: 500px;
padding: 15px;
border-radius: 20px;
max-height: 400px;
}
.text-cente {
columns: auto;
max-height: 375;
text-align: justify;
}
.text-top p {}
.center {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
<div class="contenedor">
<img class="img2" src="https://placehold.it/600x200" alt="">
<div class="text-top">
<h3>titulo</h3>
<div class="text-center">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facilis doloribus sunt placeat praesentium porro. Perferendis atque quae fugit molestiae recusandae laudantium iusto, enim facilis deserunt laboriosam qui deleniti neque esse? Lorem ipsum
dolor sit, amet consectetur adipisicing elit. Eum odit rerum inventore aspernatur atque ad harum architecto necessitatibus deleniti, reiciendis fugiat sit, pellendus nisi enim delectus illum accusantium. Cupiditate. Lorem ipsum dolor sit amet
consectetur adipisicing elit. Pariatur officiis earum nihil beatae ratione, odio placeat labore nam quae omnis aliquam sapiente vitae, facilisconsequuntur. Obcaecati accusantium officia ipsa deleniti. Lorem, ipsum dolor sit amet consectetur adipisicing
elit. Veritatis, perferendis numquam! Corporis placeat explicabo ipsa, iusto molestias nobis labore tempora velit nam. Magni eligendi, eius esse consectetur dolor at similique?Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquam illo
deserunt dicta sed veniam. Temporibus sed tempore ad. Optio harum ullam consequatur nesciunt earum deleniti magnam, voluptas incidunt nemo laudantium. Lorem ipsum dolor, sit amet consectetur adipisicing elit. Placeat porro optio, eveniet tempora
esse vel doloribus enim. Fugiat natus illo enim totam. Quidem unde ea nesciunt natus quisquam porro dolore. Accusantium, aspernatur sint? Commodi eveniet eius quaerat libero minima aut rerum nobis magnam! Qui illum cupiditate autem magni beatae
vitae! Dolores harum esse, repellendus ex cumque corporis! Esse, necessitatibus doloribus? Hic, amet eligendi modi culpa aliquid alias laudantium id earum, deserunt dignissimos numquam nemo, quam quidem accusamus impedit illum? Nemo ipsam earum
dolore eaque ea sint temporibus perspiciatis pariatur enim?
</p>
</div>
</div>
<div class="center">
cetnter
</div>
</div>
column-count
. Por favor, añade algo más de detalle (y a ser posible el CSS) para poder ver el problema y ayudarte de la forma más adecuada. Completa el recorrido de bienvenida y lee sobre cómo crear un ejemplo mínimo verificable para más información..text-center > p { text-align:justify; }