我有一个项目列表,并在一些项目的末尾我想添加一个图标(或其中几个 - 它's dynamic). Items'容器有一个固定的宽度,如果项目's text size is too big - I' d喜欢添加省略号 .
所以问题是在文本旁边添加了图标,如果文本很长 - 图标会移出容器 . 所有项目的模板必须相同 .
Note: 并非所有项目都有图标,而某些图标可能有多个图标 .
Note2: javascript解决方案不适用,想在纯CSS中制作它 .
实际:
预期:
任何帮助深表感谢 .
body {
font-size: 20px;
}
.container {
width: 150px;
background: #ff0;
list-style: none;
padding: 0px;
margin: 0px;
}
.container li {
border-bottom: 1px solid #000;
}
.item {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.icon {
background: #0f0;
}
<ul class="container">
<li>
<div class="item">
<span class="text">Text 1</span>
<span class="icon">12</span>
</div>
</li>
<li>
<div class="item">
<span class="text">Text 2 Text 2</span>
<span class="icon">12</span>
</div>
</li>
<li>
<div class="item">
<span class="text">Text 3 Text 3 Text 3</span>
<span class="icon">12</span>
</div>
</li>
<li>
<div class="item">
<span class="text">Text 4 Text 4 Text 4</span>
<span class="icon"></span>
</div>
</li>
</ul>
2 回答
如果还有人在寻找解决方案,我想出来了:
标记:
样式:
https://jsfiddle.net/rezed/n1qft37L/
试试这样: Demo
修复
.item class
旁边文本的宽度,并使display as inline-block
浮动图标 . CSS:希望这可以帮助 :)