How to do text-overflow: ellipsis in reverse?

Question

This CSS:

text-overflow: ellipsis;

Changes "StartOfLineMiddleOfLineEndOfLine" into "StartOfLineMiddleOfLineEndOf..." when there is an overflow. How do I this in reverse, making it "...OfLineMiddleOfLineEndOfLine"? Is there any workaround? I am ok with "fLineMiddleOfLineEndOfLine" without the "..." as well.

So far, I can do something slightly ok. Like

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

This one truncates the prefix, but I want the text to align to the left instead.

Answer 1

Change the direction if you want the ellipsis.

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

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

And use flexbox if you don't need it:

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

<div class="box">

  StartOfLineMiddleOfLineEndOfLine

</div>