2012-03-06 134 views
6

我有一个无序列表中的项目列表中的一个div隐藏溢出。列表中的项目由包含文本内容和边框的框表示。它可以是一个很长的有用但不重要的信息列表,如果在较小的设备上使用,可以隐藏这些信息。CSS:剪切时删除整个元素

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

当前列表可以像这样修剪时:

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

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

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

该项目不必在无序列表中,可以在任何。有没有办法做到这一点只有HTML和CSS?

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

+4

我不认为你可以做到这一点的CSS ... – Andre 2012-03-06 20:25:42

+0

我不认为有一个简单的解决方案,仅使用HTML和CSS这个问题。我能想到做到这一点的唯一方法是确保列表中的每个项目与包含溢出的包含div的高度相同:隐藏属性。 – 2012-03-06 20:31:23

+0

在显示溢流盒和清单项目的高度之前,你知道什么吗?或者一切都完全随机? – ScottS 2012-03-06 21:19:34

回答

5

它可能与“Flex”属性。请参阅:http://jsfiddle.net/dsmzz4ks/

在小提琴中,使窗口显示宽度变小。你会看到任何不适合的列表项目被完全删除,直到窗口再次变大。

这是有点hokey因为它使用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; 
} 
+2

非常有帮助!这应该被标记为答案 – lopata 2016-04-22 23:51:29