我使用direction:rtl
进行跨度,以便在长字符串的左侧用省略号将其截断。
但是,当目标字符串的最后三个字符包含,--
时,由于某种原因,该字符串会被微不足道地修饰为左侧。
这是错误还是功能?
div {
padding-bottom: 1em;
}
.moves-made {
display: flex;
justify-content: flex-start;
max-width: 10em;
}
.moves-made-string {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
direction: rtl; // ellipsis on left
}
<div>Expected:</div>
<div class="moves-made">
<span class="moves-made-string">K10,xx,K11,xx</span>
</div>
<div>Motivation for this: to left-truncate a string using ellipsis</div>
<div class="moves-made">
<span class="moves-made-string">K10,K11,K11,K11,K12,K13,K14</span>
</div>
<div> Wait, what?</div>
<div class="moves-made">
<span class="moves-made-string">K10,--,K11,--</span>
</div>
我在OSX下的Chrome和Opera上获得了此功能。似乎足以排除“仅是Chrome漏洞”