我有一个项目列表,并在一些项目的末尾我想添加一个图标(或其中几个 - 它'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;
}
-
Text 1
12
-
Text 2 Text 2
12
-
Text 3 Text 3 Text 3
12
-
Text 4 Text 4 Text 4