我试图显示一个指示器(橙色点)来表示列表项上发生了一个操作。我还使用 overflow: hidden;
和 text-overflow: ellipsis;
来处理文本溢出。
我面临的问题是,当发生文本溢出时,指示器不可见。
.root {
width: 200px;
border: 1px solid black;
}
ul {
margin: 0;
padding: 0;
list-style-type: none;
}
li {
border-bottom: 1px solid gray;
display: flex;
}
li .name {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
li .name:after {
content: '';
display: inline-block;
width: 6px;
height: 6px;
background: orange;
}
<div class="root">
<ul>
<li>
<div class="name">
This is one
</div>
</li>
<li>
<div class="name">
This is one
</div>
</li>
<li>
<div class="name">
This is one
</div>
</li>
<li>
<div class="name">
This Long Long Long Long Text Is Here
</div>
</li>
</ul>
</div>
最佳答案
为什么会这样
伪元素被视为 inline-block
内容,这意味着它直接位于文本之后。
你能做什么?
您可以强制显示伪元素,方法是使用 position: absolute;
将其从文档流中取出,并将其放置在 .name
容器的末尾。
需要进行以下更改:
- 添加
position: relative;
和padding-right: 10px;
到li .name
,这将相对于它定位伪元素并提供一些喘息的空间 - 添加
position: absolute;
,right: 2px;
,top: 0;
,bottom: 0;
和margin: auto;
将伪元素定位在.name
的末尾
.root {
width: 200px;
border: 1px solid black;
}
ul {
margin: 0;
padding: 0;
list-style-type: none;
}
li {
border-bottom: 1px solid gray;
display: flex;
}
li .name {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
position: relative;
padding-right: 10px;
}
li .name:after {
content: '';
display: inline-block;
width: 6px;
height: 6px;
background: orange;
position: absolute;
right: 2px;
top: 0;
bottom: 0;
margin: auto;
}
<div class="root">
<ul>
<li>
<div class="name">
This is one
</div>
</li>
<li>
<div class="name">
This is one
</div>
</li>
<li>
<div class="name">
This is one
</div>
</li>
<li>
<div class="name">
This Long Long Long Long Text Is Here
</div>
</li>
</ul>
</div>
关于css - :after node is not visible with text overflow ellipsis,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44156015/