如何进行文本溢出：反斜杠？

Question

此CSS：

text-overflow: ellipsis;

当发生溢出时，

将“ StartOfLineMiddleOfLineEndOfLine”更改为“ StartOfLineMiddleOfLineEndOf ...”。我该如何反过来使其变为“ ... OfLineMiddleOfLineEndOfLine”？有什么解决方法吗？我也可以使用“ fLineMiddleOfLineEndOfLine”而不使用“ ...”。

到目前为止，我可以做点OK。喜欢

      <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>