html – CSS：剪切时删除整个元素

发布时间：2020-12-14 16:38:06 所属栏目：资源来源：网络整理

导读：我在div中的无序列表中有一个项目列表,其中隐藏了溢出.列表中的项目由带有文本内容的框和围绕它们的边框表示.它可以是一长串有用但非必要的信息,如果在较小的设备上使用,可以隐藏它们. 如果列表中的某些项溢出,我想将整个项目设置为隐藏,而不仅仅是其中的一

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

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

当剪辑时,列表看起来像这样：

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

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

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

这些项目不必在无序列表中,可以是任何内容.有没有办法只用html和CSS这样做？

我能够在jQuery中做到这一点,但我只是想知道是否有一种css方式来做到这一点.

解决方法

它可以使用“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;
}

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!