¿Cómo ocultaría dinámicamente múltiples elementos según el tamaño del contenedor para que no se ajuste?
Me explico con algunas capturas de pantalla:
Tengo una cantidad no predecible de etiquetas con tamaño aleatorio y, básicamente, me gustaría agregar una clase d-none a todos los elementos más recientes hasta que el contenedor no esté envuelto. El último elemento sería un botón de alternancia para mostrar/ocultar elementos ocultos. La segunda captura de pantalla muestra lo que quiero evitar, el contenedor no debe envolverse, siempre debe estar en una línea.
Es un proyecto de React, probé varias cosas, como usar useRef para obtener el tamaño de cada etiqueta, pero no puedo ocultar solo los elementos más recientes.
Aquí hay una muestra del código:
<div class="row"> <div class="col"> <span class="badge bg-white">zetze</span> <span class="badge bg-white">fsdfdsfsd</span> <span class="badge bg-white">fdsfdsfsd</span> <span class="badge bg-white">gfgfgdfgdf</span> <span class="badge bg-white d-none">gfdgdfn</span> <span class="badge bg-white d-none">rtetret</span> <button type="button" class="btn show-more"><i class="fe fe-plus"></i></button> </div> </div> Para explicarlo con el código anterior, me gustaría que mi elemento div.col nunca se ajuste a una segunda línea y agregue clases d-none (ocultarlas) a todos los elementos secundarios que excedan, excepto el botón.
¿Tienes una idea de cómo lograr esto? Cualquier pista será apreciada.
Bueno, no hay forma de hacer que CSS dependa de la extensión de un lapso en los navegadores actuales (que yo sepa). Al menos puedes evitar que se ajuste con white-space: nowrap;
Entonces necesitará JS para esto, usando algo como offsetWidth . Estoy usando Vue, por lo que no puedo dar ningún detalle, pero renderizaría los Elementos de intervalo a partir de una matriz de objetos que tienen una propiedad oculta, y después de calcular cuánto espacio queda, apaga los intervalos, que van más allá del div padre. Por supuesto, también querrá vincular datos al botón mostrar más, ya que no siempre está visible. Tenga cuidado de hacer el cálculo cuando DOM finalmente se haya renderizado. Estoy seguro de que hay un gancho para eso en React-Lifecycle.