CSS: rimuovi l'intero elemento quando è tagliato.

Question

Ho un elenco di elementi in una lista non ordinata all'interno di un div con overflow nascosto. Gli elementi nell'elenco sono rappresentati da caselle con contenuto di testo e un bordo attorno a loro. Può essere una lunga lista di informazioni utili, ma non essenziali, che possono essere nascoste se usate su un dispositivo più piccolo.

Se alcuni elementi dell'elenco hanno un overflow, desidero impostare l'intero articolo che trabocca come nascosto, non solo parte di esso.

attualmente la lista può apparire così quando è agganciato:

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

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

Dal B trabocca viene visualizzato solo la metà di esso. Vorrei solo che A fosse visualizzato se ciò accadesse.

Gli articoli non devono essere in una lista non ordinata, possono essere in qualsiasi cosa. È un modo per farlo con solo html e css?

Sono in grado di farlo in jQuery, ma mi chiedo solo se c'è un modo css per farlo.

Answer 1

È possibile con la proprietà "Flex". Vedi: http://jsfiddle.net/dsmzz4ks/

Nel violino, ridurre la larghezza del display della finestra. Vedrai quali elementi della lista che non si adattano verranno rimossi completamente finché la finestra non diventerà più grande.

È un po 'ingombrante in quanto sta aggiungendo il proiettile usando la clausola li:before ma funziona comunque.

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; 
}