如何做文本溢出：反向省略号？

Question

这个CSS：

text-overflow: ellipsis;

发生溢出时，将“StartOfLineMiddleOfLineEndOfLine”更改为“StartOfLineMiddleOfLineEndOf...”。我如何反过来，使其成为“...OfLineMiddleOfLineEndOfLine”？有什么解决方法吗？我对没有“...”的“fLineMiddleOfLineEndOfLine”也很好。

到目前为止，我可以做一些还不错的事情。喜欢

      <div style="float: right; overflow: hidden; white-space: nowrap;">
        <div>
          StartOfLineMiddleOfLineEndOfLine
        </div>
      </div>

这个截断了前缀，但是，我希望文本向左对齐。谢谢

Answer 1

如果需要省略号，请更改方向。

.box {
  overflow: hidden;
  white-space: nowrap;
  width: 120px;
  text-overflow: ellipsis
}

<div dir="rtl" class="box">
  StartOfLineMiddleOfLineEndOfLine
</div>

如果不需要，请使用 flexbox：

.box {
  overflow: hidden;
  white-space: nowrap;
  width: 120px;
  display: flex;
  justify-content: flex-end;
}

<div class="box">

  StartOfLineMiddleOfLineEndOfLine

</div>