content: '>';overflow: hidden;HTML：
<body>
<div style="text-align:center;">
<span style="float:left;">I'm on the left</span>
<span class="centered-text">a brown fox jumps over the lazy dog</span>
<span style="float:right;">I'm on the right</span>
</div>
</body>
CSS：
.centered-text {
display: inline-block;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
width: 30vw;
}
.centered-text::before {
content: '<';
}
.centered-text::after {
content: '>';
}
结果：
I'm on the left <a brown fox jumps over th... I'm on the right
“::after”中的'>'被剪掉了.
我期望的是 '>' 仍然可见。
I'm on the left <a brown fox jumps over th...> I'm on the right
我已经将
overflow: visible;.centered-text