CSS：クリップされたときに要素全体を削除します

Question

div内の順序付けられていないリスト内のアイテムのリストがオーバーフローで隠されています。リスト内の項目は、テキストの内容と境界を囲むボックスで表されます。これは、重要な情報ではない有用な情報の長いリストになる可能性があり、小さなデバイスで使用すると隠れる可能性があります。

リストの一部がオーバーフローしている場合は、オーバーフローする項目全体を非表示に設定したいと思っています。クリップされたときに

現在のリストは次のようになります。

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

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

それのBオーバーフローが半分だけが表示されますので。これが発生した場合は、Aのみを表示することをお勧めします。

項目は順序付けられていないリストにある必要はなく、何でも構いません。 htmlとcssだけでこれを行う方法はありますか？

私はjQueryでそれを行うことができますが、それを行うCSSの方法があるかどうかは疑問です。

Answer 1

「Flex」プロパティでも可能です。参照：http://jsfiddle.net/dsmzz4ks/

ウィンドウ内の表示幅を小さくします。ウィンドウが大きくなるまで、完全に削除されたリスト項目は表示されません。

li:before句を使用して箇条書きを追加している点でちょっとホッケーですが、それでも機能します。

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