如何在剪辑时删除整个元素？

Question

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

如果列表中的某些项目溢出，我想将溢出的整个项目设置为隐藏，而不仅仅是其中的一部分。

目前，列表在剪辑时看起来像这样：

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

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

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

这些项目不必位于无序列表中，可以位于任何位置。有什么办法只使用 HTML 和 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;
}

这里的关键属性是

display: flex

在父级上使用弹性框。

flex-direction: column

确保元素的顺序是垂直的，而

flex-wrap: wrap

将任何溢出的元素包装到另一列。这可以缩短为：

display: flex;
flex-flow: column wrap;

如果所有子元素的行为方式都覆盖其父元素的整个宽度，则意味着任何溢出元素都将被包装到另一列中，从而有效地从视图中隐藏并避免任何剪切。