CSS: delete the whole item when cropping

Question

I have a list of items in an unordered list inside a div with hidden overflow. Elements in the list are represented by blocks with text content and a frame around them. This may be a long list of useful, but not essential information that may be hidden when used on a smaller device.

If some elements are in the list overflow, I would like to set the whole element that overflows as hidden, and not just part of it.

the list may now look like this:

--------- | A | | | --------- --------- | B | 

Since B overflows, only half of them are displayed. I would like this to be displayed only.

Elements do not have to be in an unordered list; they can be anywhere. Is it possible to do this only with html and css?

I can do this in jQuery, but I'm just wondering if there is a css way for this.

Answer 1

This is possible using the "Flex" property. See: http://jsfiddle.net/dsmzz4ks/

In the script, reduce the width of the window. You will see that all the elements of the list that do not suit you will be completely removed until the window is enlarged again.

This is a little suspicious as it adds a marker using the li:before clause, but 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 are that display: flex uses the flex box on the parent element. flex-direction: column ensures that the order of the elements is vertical, and flex-wrap: wrap wraps any overflow element in another column. This can be shortened to:

 display: flex; flex-flow: column wrap; 

If all child elements behave in such a way that they cover the entire width of their parent element, then this means that any overflow elements are transferred to another column, effectively hiding from viewing and avoiding any clipping.