这里是我的代码以省略号引导省略号列表组正导致成覆盖排
<div class="list-group" id="NotificationList">
<a href="#" class="list-group-item">
<div class="checkbox">
<label>
<input type="checkbox">
</label>
</div>
<span class="">This is your first notification.</span>
<span class="badge">12:10 AM</span>
</a>
<a href="#" class="list-group-item">
<div class="checkbox">
<label>
<input type="checkbox">
</label>
</div>
<span class="notificat" style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap;">This is your first notification. This is your first notification. This is your first notification. This is your first notification.
</span>
<span class="badge">12:10 AM</span>
</a>
<a href="#" class="list-group-item">
<div class="checkbox">
<label>
<input type="checkbox">
</label>
</div>
<span class="notificat" style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap;">This is your first notification.</span>
<span class="badge">12:10 AM</span>
</a>
</div>
CSS:
.checkbox {
float: left;
}
.notificat {
max-width: 300px;
float: left;
}
小提琴:https://jsfiddle.net/SimplytheVinay/fqfmh818/1/
这里是另一个没有省略号,这是按我的预期工作的。
<div class="list-group" id="NotificationList">
<a href="#" class="list-group-item">
<div class="checkbox">
<label>
<input type="checkbox">
</label>
</div>
<span class="">This is your first notification.</span>
<span class="badge">12:10 AM</span>
</a>
<a href="#" class="list-group-item">
<div class="checkbox">
<label>
<input type="checkbox">
</label>
</div>
<span class="">This is your first notification.</span>
<span class="badge">12:10 AM</span>
</a>
<a href="#" class="list-group-item">
<div class="checkbox">
<label>
<input type="checkbox">
</label>
</div>
<span class="">This is your first notification.</span>
<span class="badge">12:10 AM</span>
</a>
<a href="#" class="list-group-item">
<div class="checkbox">
<label>
<input type="checkbox">
</label>
</div>
<span class="">This is your first notification.</span>
<span class="badge">12:10 AM</span>
</a>
</div>
CSS:
.checkbox {
float: left;
}
小提琴:https://jsfiddle.net/SimplytheVinay/mp97gLjm/
非常感谢:)添加显示:inline-block;解决了这个问题。还有一件事,我们为什么要改变填充?省略号是否改变了元素周围的填充? – Crawling
@漫画不客气,很高兴为您效劳。改变填充是可选的,但是_display:inline-block; _引起视图的改变。没关系!您可以更改填充值并查看视图如何更改。 –