CSS: eliminar todo el elemento cuando está recortado

Question

Tengo una lista de elementos en una lista desordenada dentro de un div con desbordamiento oculto. Los elementos en la lista están representados por cuadros con contenido de texto y un borde alrededor de ellos. Puede ser una larga lista de información útil, pero no esencial, que puede ocultarse si se usa en un dispositivo más pequeño.

Si algunos elementos de la lista se desbordan, me gustaría configurar todo el elemento que se desborda como oculto, no solo como parte de él.

actualmente la lista puede tener este aspecto cuando recortado:

--------- 
| A | 
|  | 
--------- 

--------- 
| B | 

Puesto que B se desborda sólo se muestra la mitad de ella. Me gustaría mostrar solo A si esto ocurre.

Los artículos no tienen que estar en una lista desordenada, pueden estar en lo que sea. ¿Hay alguna forma de hacerlo con solo html y css?

Puedo hacerlo en jQuery, pero me pregunto si hay una manera css de hacerlo.

Answer 1

Es posible con la propiedad "Flex". Consulte: http://jsfiddle.net/dsmzz4ks/

En el violín, reduzca el ancho de la ventana. Verá que los ítems de la lista que no encajan se eliminan completamente hasta que la ventana se agranda nuevamente.

Es un poco cursi porque agrega la viñeta usando la cláusula li:before, pero funciona de todos modos.

CSS:

.box { 
    width: 30%; 
    float: left; 
    margin: 8px 16px 8px 0; 
    position: relative; 
    border: 1px solid black; 
    padding: 15px; 
} 

ul { 
    height: 90px; 
    display: flex; 
    flex-direction: column; 
    flex-wrap: wrap; 
    overflow: hidden; 
    padding-left: 15px; 
    justify-content: space-around; 
    margin: 0; 
} 

li { 
    display: block; 
    width: 100%; 
    padding-left: 10px; 
    position: relative; 
} 

li:before { 
    content: '\2022'; 
    position: absolute; 
    left: -5px; 
}