有没有办法使用**CSS only**（不是JS）来隐藏整个列表项或div，如果它的一部分被溢出切断：隐藏？

Question

首先，这个问题之前（以某种方式）但没有示例：Hiding an element completly that has had some overflow hidden

问题

我正在使用 Gridster 框架 http://gridster.net/ 来显示一些内容，它在每个内容区域使用固定高度，溢出：隐藏。

我放置在每个内容区域的内容可能是 10 个字符长或 100 个字符（在响应式框架中）引导程序，因此有时会被截断。

支持图片

现在的样子

我希望它看起来如何

示例代码

HTML

<div class="example_container">
<div class="WidgetContent pull-left">
<ul class="unstyled">    
<li class="person ActivePerson">
<div class="StaffThumb pull-left">
<img src="https://cdn1.iconfinder.com/data/icons/dot/256/man_person_mens_room.png">
</div>
<div class="expert-details pull-left">
<ul class="innerBox unstyled">
<li>
<a href="#">James Harris</a>
</li>
<li>Senior Management</li>
<li>London</li>
<li>VP, Marketing Communications</li>
</ul>
</div>
<div class="container-number pull-right">
<span class="label">76</span>
</div>
</li>                
<li class="person ">
<div class="StaffThumb pull-left">
<img src="https://cdn1.iconfinder.com/data/icons/dot/256/man_person_mens_room.png">
</div>
<div class="expert-details pull-left">
<ul class="innerBox unstyled">
<li>
<a href="#" data-personid="309">Carlos Fernandez</a>
</li>
<li>Senior Management</li>
<li>Madrid</li>
<li>Senior Business Development Coordinator</li>
</ul>
</div>
<div class="container-number pull-right">
<span class="label">72</span>
</div>
</li>                   
<li class="person ">
<div class="StaffThumb pull-left">
<img src="https://cdn1.iconfinder.com/data/icons/dot/256/man_person_mens_room.png">
</div>
<div class="expert-details pull-left">
<ul class="innerBox unstyled">
<li>
<a href="#">Kate Evans</a>
</li>
<li>Research</li>
<li>London</li>
<li>Communications Systems Analyst - Millar A/C Manager</li>
</ul>
</div>
<div class="container-number pull-right">
<span class="label">71</span>
</div>
</li>                  
<li class="person ">
<div class="StaffThumb pull-left">
<img src="https://cdn1.iconfinder.com/data/icons/dot/256/man_person_mens_room.png">
</div>
<div class="expert-details pull-left">
<ul class="innerBox unstyled">
<li>
<a href="#">Brian Montrose</a>
</li>
<li>Business Development</li>
<li>New York</li>
<li>Business Development Analyst</li>
</ul>
</div>
<div class="container-number pull-right">
<span class="label">70</span>
</div>
</li>                            
<li class="person ">
<div class="StaffThumb pull-left">
<img src="https://cdn1.iconfinder.com/data/icons/dot/256/man_person_mens_room.png">
</div>
<div class="expert-details pull-left">
<ul class="innerBox unstyled">
<li>
<a href="#">Alison Roberts</a>
</li>
<li>HR</li>
<li>San Francisco</li>
<li>HR - Pension</li>
</ul>
</div>
<div class="container-number pull-right">
<span class="label">68</span>
</div>
</li>                            
</ul>
</div></div>

CSS

.example_container { width:300px; height:325px; overflow:hidden; }
.WidgetContent {
width: 100%;
position: relative;
}
.pull-left {
float: left;
}
.pull-right {
float: left;
}
ul.unstyled, ol.unstyled {
list-style: none outside none;
margin-left: 0;
padding:0;
}
.ActivePerson {
background-color: #FCF8E3;
}
.person {
border-bottom: 1px dashed #E2E2E2;
display: block;
padding: 7px 50px;
}
li {
overflow: hidden;
}
.StaffThumb img {
border-radius: 3px;
height: 35px;
margin: 4px 10px 0 0;
width: 35px;
}
.StaffThumb {
left: 10px;
margin: 0;
position: absolute;
}
.container-number {
position: absolute;
right: 10px;
}
.ActivePerson .label {
background-color: #F89406;
}
.label {
font-size: 16px;
line-height: 20px;
margin: 0 5px;
position: relative;
top: 5px;
border-radius: 3px;
padding: 1px 4px 2px;
}

小提琴示例

http://jsfiddle.net/3sTNL/

Answer 1

这个额外的 CSS：使用 flex 布局

.WidgetContent {
    height: 100%;
}
.WidgetContent > .unstyled {
    margin: 0;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    float:left;
    height: 100%;
}
.person {
    position: relative;
}

fiddle here

Answer 2

是的！

• 将column-width 添加到ul，等于容器的宽度。
• 将height 添加到ul，等于容器的高度减去填充/边距
• 将break-inside:avoid (-webkit-column-break-inside) 添加到.people 项目中

结果：http://jsfiddle.net/3sTNL/3/（在 Chrome 中测试）

这很牛XD但它有效！