CSS: xóa toàn bộ phần tử khi bị cắt bớt

Question

Tôi có danh sách các mục trong danh sách không có thứ tự bên trong một div có ẩn bị tràn. Các mục trong danh sách được thể hiện bằng các hộp có nội dung văn bản và một đường viền quanh chúng. Nó có thể là một danh sách dài các thông tin hữu ích nhưng không cần thiết, có thể bị ẩn nếu được sử dụng trên một thiết bị nhỏ hơn.

Nếu một số mục trong danh sách tràn tôi muốn đặt toàn bộ mục bị tràn như bị ẩn, không chỉ là một phần của nó.

hiện trong danh sách có thể trông như thế này khi kẹp:

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

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

Kể từ B tràn chỉ một nửa của nó được hiển thị. Tôi chỉ muốn A được hiển thị nếu điều này xảy ra.

Các mục không cần phải nằm trong danh sách không có thứ tự, có thể là bất kỳ thứ gì. Có cách nào để làm điều này chỉ với html và css?

Tôi có thể làm điều đó trong jQuery, nhưng tôi tự hỏi nếu có một cách css để làm điều đó.

Answer 1

Có thể với thuộc tính "Flex". Xem: http://jsfiddle.net/dsmzz4ks/

Trong mục này, làm cho chiều rộng cửa sổ hiển thị nhỏ hơn. Bạn sẽ thấy bất kỳ mục danh sách nào không phù hợp sẽ bị xóa hoàn toàn cho đến khi cửa sổ trở lại lớn hơn.

Đó là một chút hokey ở chỗ nó thêm viên đạn sử dụng mệnh đề li:before nhưng nó vẫn hoạt động.

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