我在div中的无序列表中有一个项目列表,其中隐藏了溢出.列表中的项目由带有文本内容的框和围绕它们的边框表示.它可以是一长串有用但非必要的信息,如果在较小的设备上使用,可以隐藏它们.
如果列表中的某些项溢出,我想将整个项目设置为隐藏,而不仅仅是其中的一部分.
当剪辑时,列表看起来像这样：
--------- | A | | | --------- --------- | B |
这些项目不必在无序列表中,可以是任何内容.有没有办法只用html和CSS这样做？
我能够在jQuery中做到这一点,但我只是想知道是否有一种css方式来做到这一点.
解决方法@H_301_16@
它可以使用“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;
}
在小提琴中,使窗口显示宽度更小.在窗口再次变大之前,您将看到任何不适合的列表项被完全删除.
这是有点好事,因为它使用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; }
