带有省略号的动态文本旁边的滑动图标
基里尔
我有一个项目列表，在某些项目的末尾，我想添加一个图标（或其中几个-它是动态的）。项目的容器具有固定的宽度，如果项目的文本大小太大-我想添加省略号。
因此，问题在于在文本旁边添加了图标，如果文本很长，则该图标将从容器中移出。所有项目的模板必须相同。
注意：并非所有项目都有图标，某些图标可能有多个图标。
注意2： 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> 大小
如果有人仍在寻找解决方案，我就知道了：
标记：
<div class="block-wrap">
<div class="block">
<div class="icon"></div>
<div class="text">Text text text text text text text text text text text text text text text text text text text</div>
</div>
</div>
样式：
.block-wrap {
display: inline-block;
max-width: 100%;
}
.block {
width: 100%;
}
.text {
display: block;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.icon {
float: right;
margin-left: 10px;
width: 20px;
height: 14px;
background-color: #333;
}
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
编辑于
相关文章
Related 相关文章
- 1
截断标题旁边带有省略号的文本
- 2
在带有文本溢出省略号的行之后放置图标
- 3
相等但动态大小的列，带有省略号
- 4
内联元素在文本上带有省略号
- 5
如何用省略号截断长文本，但总是在省略号后显示图标
- 6
Bootstrap面板标题：标题文本右侧带有省略号和按钮
- 7
CSS div自动调整大小到内容，带有最大宽度和省略号文本
- 8
带有文件扩展名的文本溢出省略号
- 9
Android TextView剪辑的文本开头是否带有省略号？
- 10
如何在CSS中的省略号文本溢出旁边（右侧）添加文本？
- 11
带有省略号的CSS文字换行
- 12
带有内联元素的CSS省略号？
- 13
具有多个跨度的文本溢出省略号
- 14
如何创建一个带有长文本右对齐的 QTableWidgetItem，左边有省略号？
- 15
带有文本省略号的表格单元中的contenteditable div在IE11中不起作用
- 16
显示图像，用省略号修饰一些文本，然后显示图标
- 17
文本溢出：省略号不被尊重
- 18
如何在Angular中使用省略号和标签实现（动态宽度）文本输入？
- 19
需要使文本更短（文本溢出有问题：省略号）
- 20
TextView文本在左侧被截断，而不是省略了省略号
- 21
PyQt / Qt，带有自定义委托的tableview，用于使用省略号来显示文本溢出单元格
- 22
如何使省略号在具有动态宽度（flex：1）的flex项目上工作？
- 23
具有第二列动态宽度和省略号的固定宽度表
- 24
TextView：在省略号后添加文本或更改省略号字符
- 25
文字溢出：省略号；不截断溢出文本并给出省略号
- 26
框中的多行带有省略号和中间垂直对齐
- 27
sprintf在C中带有省略号，用于宏定义会导致编译错误
- 28
CSS：带有正确附件的省略号应始终可见
- 29
Firefox：带有省略号的div-无法看到内部范围
我来说两句