RTL文本方向显示破折号非常奇怪-错误或误解?

时间:2019-06-30 03:02:09

标签: html css truncate

我使用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漏洞”

0 个答案:

没有答案