java如何在文字旁边加图标_用省略号在动态文本旁边滑动图标

我有一个项目列表，并在一些项目的末尾我想添加一个图标(或其中几个 - 它'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