带有省略号的动态文本旁边的滑动图标
Sliding icon next to dynamic text with ellipsis
我有一个项目列表,我想在一些项目的末尾添加一个图标(或其中的几个 - 它是动态的)。项目的容器具有固定宽度,如果项目的文本大小太大 - 我想添加省略号。
所以问题是图标被添加到文本旁边,如果文本很长 - 图标会从容器中移出。所有项目的模板必须相同。
注意:并非所有项目都有图标,有些图标可能有多个图标。
注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>
这样试试:Demo
修复 .item class
旁边文本的宽度并使 display as inline-block
与图标一起浮动。
CSS:
.item {
width:100%;
overflow: hidden;
}
.item >span {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width:70%;
display:inline-block;
}
.icon {
background: #f00;
display:inline-block;
max-width:50px;
}
希望这对您有所帮助:)
如果有人仍在寻找解决方案,我想通了:
标记:
<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;
}
我有一个项目列表,我想在一些项目的末尾添加一个图标(或其中的几个 - 它是动态的)。项目的容器具有固定宽度,如果项目的文本大小太大 - 我想添加省略号。
所以问题是图标被添加到文本旁边,如果文本很长 - 图标会从容器中移出。所有项目的模板必须相同。
注意:并非所有项目都有图标,有些图标可能有多个图标。
注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>
这样试试:Demo
修复 .item class
旁边文本的宽度并使 display as inline-block
与图标一起浮动。
CSS:
.item {
width:100%;
overflow: hidden;
}
.item >span {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width:70%;
display:inline-block;
}
.icon {
background: #f00;
display:inline-block;
max-width:50px;
}
希望这对您有所帮助:)
如果有人仍在寻找解决方案,我想通了:
标记:
<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;
}