html - CSS:剪裁时删除整个元素

Question

我在 overflow hidden 的 div 中有一个无序列表中的元素列表。列表中的元素由带有文本内容和边框的框表示。它可以是一长串有用但不是必需的信息，如果在较小的设备上使用，这些信息可以隐藏起来。

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

当前列表在裁剪后看起来像这样:

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

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

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

元素不必在无序列表中，可以是任何形式。有没有办法只用 html 和 css 来做到这一点？

我可以在 jQuery 中做到这一点，但我只是想知道是否有 css 方法来做到这一点。

Answer 1

使用“Flex”属性是可能的。请参阅:http://jsfiddle.net/dsmzz4ks/

在 fiddle 中，使窗口显示宽度变小。您会看到任何不适合的列表项都被完全删除，直到窗口再次变大。

它有点矫揉造作，因为它使用 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 box。 flex-direction: column 确保元素的顺序是垂直的，而 flex-wrap: wrap 将任何溢出的元素包装到另一列。这可以缩短为:

display: flex;
flex-flow: column wrap;

如果所有子元素的行为都覆盖了父元素的整个宽度，那么这意味着任何溢出的元素都被包裹到另一列中，有效地从 View 中隐藏起来并避免任何剪裁。