0
361
ViewsCómo ocultar los elementos secundarios que exceden el ancho del padre en CSS
El elemento principal tiene un borde discontinuo rojo y los elementos secundarios se rellenan con azul. Se puede implementar mediante inline-block , float , flex , etc. 
Quiero implementar tal efecto: cuando el ancho del elemento principal se vuelve demasiado pequeño para contener el último elemento secundario, el último elemento se ocultará.
¿Cómo implementar esto con CSS puro o con JavaScript mínimo?
3 answers
Answer question0
Hay una forma de hacer esto usando max-width , max-height y overflow , como en el siguiente ejemplo:
.parent { max-width: 400px; max-height: 60px; overflow: hidden; border: 1px dashed #ddd; } .child { width: 100px; height: 50px; margin: 5px; background-color: blue; display: inline-block; color: white; text-align: center; } <p>There are 5 items here</p> <div class="parent"> <div class="child">1</div> <div class="child">2</div> <div class="child">3</div> <div class="child">4</div> <div class="child">5</div> </div> Y aquí hay otro ejemplo usando flex en lugar de display: inline block ; con max-width max-height y overflow también
.parent { display: flex; border: 1px dashed #ccc; max-width: 380px; max-height: 60px; overflow: hidden; flex-wrap: wrap; } .child { background-color: blue; width: 100px; height: 50px; margin: 5px; } <pAnother example, using flex, with 5 items too</p> <div class="parent"> <div class="child">1</div> <div class="child">2</div> <div class="child">3</div> <div class="child">4</div> <div class="child">5</div> </div>0
Establecer la propiedad de desbordamiento del contenedor principal en oculto puede hacerlo por usted.
0
Si su estructura html es estática, puede intentar buscar consultas de medios. De lo contrario, no estoy seguro de que sea posible en CSS.
El uso de desbordamiento: oculto en su elemento principal no hará que el último elemento secundario desaparezca hasta que se desborde por completo.