まず、この質問は以前に（ある意味で）ありましたが、例はありません：いくつかのオーバーフローが隠されている要素を完全に隠す
問題
私はいくつかのコンテンツを表示するために Gridster フレームワークhttp://gridster.net/を使用しています。これは、overflow:hidden を使用して各コンテンツ領域に固定の高さを使用します。
各コンテンツ領域に配置するコンテンツは、長さが 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;
}