1

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>

3
  • Bienvenido, por favor añade el código que lleves al momento para poder brindarte una mejor ayuda, te recomiendo leer Cómo preguntar
    – user128299
    Commented el 7 oct. 2019 a las 20:04
  • 2
    Creo que lo que buscas es 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.
    – Alvaro Montoro
    Commented el 7 oct. 2019 a las 20:16
  • prueba con lo siguiente: .text-center > p { text-align:justify; } Commented el 7 oct. 2019 a las 20:16

3 respuestas 3

1

Para realizar dicha tarea CSS no basta, deberás usar JS para obtener de manera dinámica la longitud del texto

  • Usa la propiedad column-count para indicar el número de columnas entre las cuales quieres que se divida el contenido
  • Usa JS para obtener del párrafo por ejemplo la longitud precedida a través de la porpiedad innerText y luego de la propiedad length
  • Maneja mediante una serie de condicionales la longitud y aplica las reglas CSS que deseas para armar el número de columnas personalizadas, considerando que a través de JS la propiedad de columnas es columnCount sin el guión medio y con la C de count en mayúscula

Yo solo te he puesto 3 condiciones pero tu puedes continuar armando el código a necesidad de acomodar el texto

    <!DOCTYPE html>
    <html>
    <head>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width">
      <title>Ejemplo</title>
      <style>
    
      </style>
    </head>
    <body>
    <div id="parrafo">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nulla reiciendis deleniti nemo temporibus mollitia fuga saepe, ex reprehenderit id voluptatem repudiandae laudantium amet, dicta iusto aperiam ipsa nihil. Ut, sit.</div>
    <script>
        let p = document.querySelector("div").innerText.length
        
        if(p < 100) {
          document.getElementById("parrafo").style.columnCount = 1
        }else if(p > 100 && p < 200) {
          document.getElementById("parrafo").style.columnCount = 2
        }else if(p > 200) {
          document.getElementById("parrafo").style.columnCount = 3
        }
    </script>
    </body>
    </html>

1

¿Algo como esto?

Con la propiedad de css3 column-count podemos dividir el texto en la columnas que necesitemos, luego con la propiedad column-gap podemos asignar el espacio o margen entre columnas y finalmente column-rule para colocar un borde en cada columna.

*  {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    font-size: 62.5%;
    line-height: 1;
}

p {
    font-size: 15px;
    font-size: 1.5rem;    
    line-height: 1.333333334;
    margin-bottom: 20px;
    margin-bottom: 2rem;
    text-align: justify;
}

.three-columns {
    
    -webkit-column-count: 3; /* Chrome, Safari, Opera */
    -moz-column-count: 3; /* Firefox */
    column-count: 3;
    
    /*ESPACIO ENTRE COLUMNA*/
      -webkit-column-gap: 20px; /* Chrome, Safari, Opera */
    -moz-column-gap: 20px; /* Firefox */
    column-gap: 20px;
    
     -webkit-column-rule: 5px solid rgb(75, 50, 149)  ; /* Chrome, Safari, Opera */
    -moz-column-rule: 5px solid rgb(75, 50, 149)  ; /* Firefox */
    column-rule: 5px solid rgb(75, 50, 149)  ;

}
<!DOCTYPE html>
<html>
    <head>
        <title>Texto a tres columnas con HTML5 y CSS3</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
    </head>
    <body>
        <div class="three-columns">
            <p>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed venenatis efficitur ipsum, nec condimentum neque condimentum eget. Suspendisse posuere felis risus, at scelerisque nunc varius vel. Ut at ultrices est. Vivamus at volutpat nulla. Duis vel arcu magna. Nunc condimentum risus vitae tortor efficitur aliquam. Etiam id metus ornare sem dignissim ullamcorper nec ut augue. Pellentesque posuere odio nisi, malesuada sagittis sapien vestibulum nec.

Pellentesque tempor sem non sem ultricies molestie. Praesent malesuada, lorem ut sodales aliquet, nibh libero pretium orci, eget malesuada diam tortor nec lorem. Duis scelerisque, nibh nec dapibus vestibulum, justo purus sollicitudin risus, non imperdiet ipsum eros a mauris. Quisque velit diam, scelerisque non suscipit in, molestie a lectus. Duis egestas turpis eu blandit pellentesque. Mauris ornare accumsan neque, non scelerisque enim rutrum sed. Vivamus luctus tortor dolor, in sollicitudin massa sodales nec.

Integer feugiat augue dolor, eu elementum tellus dapibus quis. Quisque vulputate ut velit vitae aliquam. Vivamus pellentesque ut nisl eu accumsan. Cras et venenatis justo. Phasellus ipsum felis, tincidunt et ante et, egestas auctor dolor. Vivamus tempus lectus vitae nisl auctor suscipit. Proin quis nisi eu purus accumsan porttitor. Nunc sapien tellus, vulputate ac neque in, finibus varius ex.

Integer fringilla accumsan ullamcorper. Curabitur feugiat sem a porttitor commodo. Nullam a dolor dui. Sed hendrerit augue sapien, quis congue est elementum dapibus. Phasellus egestas lectus a massa commodo pellentesque. Nunc vitae efficitur diam, a tincidunt tortor. Suspendisse viverra ac mi eget ullamcorper.

Aliquam et pretium lacus, et mattis sem. Phasellus mauris nisl, tincidunt eu pulvinar eu, aliquam id lacus. Sed ullamcorper erat at felis faucibus semper. Sed pellentesque metus quis est pellentesque, id viverra ligula tincidunt. Morbi feugiat eget metus et vestibulum. Aenean consectetur nisi ut justo consequat, vitae eleifend mauris lobortis. Nulla fringilla ex eget egestas vulputate. In eu aliquet ante. Mauris consectetur sem ut dapibus auctor.


            </p>
           
        </div>
    </body>
</html>

2
  • es cerca pero queiero que automaticamente el se vaya organizando en varias columnas por ejemplo si tiene menos de 100 carateres se organice en una sola si tiene mas de 100 y menos de 200 se organice en 2 columnas , si tieme mas de 200 en tres columnas y asi susesivamente Commented el 7 oct. 2019 a las 20:39
  • Es más que obvio usa javascript, ya que para hacerlo dinámicos no lo puedes hacer solo con css Commented el 7 oct. 2019 a las 21:07
0

Uso de "hyphenate" La propiedad hyphenate(guiones) acepta dos valores, automático y manual. El valor auto dejará que los navegadores ajusten la propiedad hyphenate automáticamente cuando es apropiado.

{
text-align: justify;
-webkit-hyphens: auto;
-moz-hyphens: auto;
hyphens: auto;
}

en este vídeo lo solucionan usando

column-count: auto;
column-width: 8rem;

https://www.youtube.com/watch?v=3UQsR_bo-eE

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.