html - 如何做文本溢出 : ellipsis in reverse?

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>