CSS：修剪后删除整个元素 [英] CSS: remove entire element when clipped

问题描述

我在div内的无序列表中有一个项目列表，其中隐藏了溢出。列表中的项目由带有文本内容的框表示，并带有边框。它可能是一长串有用但并非必要的信息，如果在较小的设备上使用，则可以隐藏。

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   |

由于B溢出，因此仅显示一半。如果发生这种情况，我只希望显示A。

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?

我可以在jQuery中做到这一点吗，但是我只是想知道是否有CSS做到这一点？

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

推荐答案

可以通过 Flex属性进行操作。请参阅： http://jsfiddle.net/dsmzz4ks/

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.

这有点骗人，因为它使用 li：before 子句，但仍然有效。

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

此处的关键属性是 display：flex 在父级上使用弹性框。 flex-direction：列确保元素的顺序是垂直的，而 flex-wrap：wrap 包装所有溢出的元素元素到另一列。可以缩短为：

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.

这篇关于CSS：修剪后删除整个元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！