1

tengo rato intentando hacer que los elementos de la lista no se vean cortados dentro de un contenedor, esto pasa cuando un elemento tiene mucho texto, es una lista de tres columnas dentro de un contenedor con una altura maxima de 200px. Me pregunto si es posible mostrar los elementos y todos aquellos que sobrepasen o se vean cortados eliminarlos. He intentado con CSS puro pero veo que no es posible hacerlo, supongo que con javascript todo es posible pero no se por donde comenzar, alguna idea sobre como abordar este problema?

Aqui esta un demo sencillo de como se ve la lista: https://jsfiddle.net/djyu7s2w/15/

saludos a todos

1 respuesta 1

0

se puede hacer con javascript. aqui el ejemplo, si el item sobrepasa el limite de 200 lo elimina

function ver_pos(){
let li=document.querySelectorAll("li"); // busca todos los <li>
li.forEach(function(Item) { //itera sobre los resultados
  let p=Item.getBoundingClientRect(); // consulta toda la info de posisiones
  // si la pocicion en bottom es sobre pasada por el limite el item se borra
  if(p.bottom>200){
  Item.remove();// elimina el elemento que excede el máximo
  }
});
}

 ver_pos();
.wrapper {
  max-height: 200px;
  overflow: hiden;
  border: 2px solid red;
}

.list {
  column-count: 3;
  column-gap: '4rem';
  margin: 0;
}

.list-item {
  text-align: 'left';
  margin: 0 0 32px 0;
}
<div>
  <div class="wrapper">
    <ul class="list">
      <li class="list-item">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua
        </p>
      </li>
      <li class="list-item">
        <p>Sed ut perspiciatis unde omnis iste natus</p>
      </li>
      <li class="list-item">
        <p>At vero eos et accusamus</p>
      </li>
      <li class="list-item">
        <p>Sed aliquam, magna placerat semper</p>
      </li>
      <li class="list-item">
        <p>Aliquam ullamcorper sagittis</p>
      </li>
      <li class="list-item">
        <p>Nam ac fringilla nunc, a congue quam</p>
      </li>
      <li class="list-item">
        <p>Quisque maximus pharetra est, ac tristique nisl mollis egestas</p>
      </li>
      <li class="list-item">
        <p>Proin pulvinar dui</p>
      </li>
      <li class="list-item">
        <p>Duis vel sollicitudin</p>
      </li>
    </ul>
  </div>
</div>

o bien pones un overflow: scroll; a .wrapper para poser examinar toda la info haciendo un scroll

Tu Respuesta

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