我有以下HTML代码(我正在使用bootsrap 4):
<div class="badge-container">
<span class="badge badge-pill badge-primary">One</span>
<span class="badge badge-pill badge-primary">Two</span>
<span class="badge badge-pill badge-primary">Three</span>
<span class="badge badge-pill badge-primary">Four</span>
<span class="badge badge-pill badge-primary">Five</span>
<span class="badge badge-pill badge-primary">Six</span>
<span class="badge badge-pill badge-primary">Seven</span>
<span class="badge badge-pill badge-primary">Eight</span>
<span class="badge badge-pill badge-primary">Nine</span>
</div>
我的广告badge-container
素材有固定宽度,例如150像素,应该位于一行上。因此,所有徽章元素都不适合(我不知道的数量badge
)。
我希望第一个元素溢出我的div结尾,...
而下一个元素应该隐藏。例如:
一T三Fo
我尝试了以下CSS:
.badge-container {
background: red;
width: 150px;
display: flex;
}
// I can use text-truncate class instead
.badge {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
但这不起作用,因为所有元素都被截断了...
您将如何实现?纯CSS是否有可能?
删除flexbox并保持简单:
.badge-container {
background: red;
width: 170px;
overflow: hidden;
text-overflow: ellipsis;
white-space:nowrap;
}
.badge-container .badge {
display:inline; /*Remove this to have a different rendring*/
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" >
<div class="badge-container">
<span class="badge badge-pill badge-primary">One</span>
<span class="badge badge-pill badge-primary">Two</span>
<span class="badge badge-pill badge-primary">Three</span>
<span class="badge badge-pill badge-primary">Four</span>
<span class="badge badge-pill badge-primary">Five</span>
<span class="badge badge-pill badge-primary">Six</span>
<span class="badge badge-pill badge-primary">Seven</span>
<span class="badge badge-pill badge-primary">Eight</span>
<span class="badge badge-pill badge-primary">Nine</span>
</div>
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句