Can I put Ellipsis on the Left and Periods on the Right?

Question

Moving the Ellipsis (...) to the left is done easily with:

.overflow-box{
    direction: rtl;
    text-overflow: ellipsis;
    overflow: hidden;
}

But what if there's punctuation at the end, like a period (.) or question mark? It's also displayed on the left. I'd still like to see the period on the right. Is there an easy way around this?

Demo: https://jsfiddle.net/JoelMac/Lx4L15o3/5/

Answer 1

tl;dr: append ‎ to the end of your text like this

<div>
Where is the question mark?&lrm;
</div>

Looks like a duplicate of Why is a trailing punctuation mark rendered at the start with direction:rtl?

Punctuations really do behave this way according to this.

Answer 2

One way is to put the content of the div in a span with dir="ltr", forcing the content to be rendered in the standard order while still cutting off to the left as desired.

div {
  width: 300px;
  white-space: nowrap;
  border: solid 1px #000;
  margin-bottom: 10px;
  direction: rtl;
  text-overflow: ellipsis;
  overflow: hidden;
}

<div>
  <span dir="ltr">This is a sentence that is too long to fit in the space provided.
  The ellipsis is where I want it.</span>
</div>

<div>
  <span dir="ltr">Where is the question mark?</span>
</div>

However, this is not the only possible solution. As @reiallenramos's answer shows, you can also insert ‎ at the end of the content; that will work too.
An added benefit of the latter approach is that you won't need to change the markup; you can do it wholly in CSS, as follows:

div {
  width: 300px;
  white-space: nowrap;
  border: solid 1px #000;
  margin-bottom: 10px;
  direction: rtl;
  text-overflow: ellipsis;
  overflow: hidden;
}

div::after {
  content:'\200E';
}

<div>
  This is a sentence that is too long to fit in the space provided.
  The ellipsis is where I want it.
</div>

<div>
  Where is the question mark?
</div>

This would then be my preferred method, but you can choose whatever you want.