CSS: remove entire element when clipped

Question

I have a list of items in an unordered list inside a div with overflow hidden. The items in the list are represented by boxes with text content and a border round them. It can be a long list of useful, but not essential information, that can be hidden if used on a smaller device.

If some items in the list overflow I would like to set the entire item that overflows as hidden, not just part of it.

currently the list can look like this when clipped:

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

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

Since B overflows only half of it is displayed. I would like only A to be displayed if this occurs.

The items do not have to be in an unordered list, can be in whatever. Is it any way to do this with only html and css?

I am able to do it in jQuery, but I just wonder if there is a css way to do it.

Answer 1

It is possible with the "Flex" property. See: http://jsfiddle.net/dsmzz4ks/

In the fiddle, make the window display width smaller. You will see whatever list items that don't fit are removed completely until the window gets bigger again.

It is a bit hokey in that it is adding the bullet using the li:before clause but it works nonetheless.

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

The key properties here is that display: flex uses flex box on the parent. flex-direction: column makes sure that the order of elements is vertical, while flex-wrap: wrap wraps any overflowing element to another column. This can be shortened to:

display: flex;
flex-flow: column wrap;

If all children elements are behaving in such a way that they are covering the entire width of their parent, then that means any overflowing elements are wrapped into another column, effectively being hidden from view and avoiding any clipping.