Question

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

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

目前列表在剪辑时可能如下所示：

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

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

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

这些项目不必在无序列表中，可以是任何内容。是否只使用html和css进行此操作？

我能够在jQuery中完成它，但我只是想知道是否有一种css方法可以做到。

Answer 1

可以使用＆＃34; Flex＆＃34;属性。请参阅：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;
}

CSS：剪切时删除整个元素

1 个答案: