Text ellipsis at start of string with CSS?

Question

Getting this effect with CSS it's easy:

This is a very long para...

We just just use text-overflow:ellipsis.

However the reverse

... is a very long paragraph.

seems less obvious.

I have read this comprehensive article but the solution give there is still less than ideal.

Here's the CSS to implement it

.reverse-ellipsis {
  text-overflow: clip;
  position: relative;
  background-color: white;
}

.reverse-ellipsis:before {
  content: '\02026';
  position: absolute;
  z-index: 1;
  left: -1em;
  background-color: inherit;
  padding-left: 1em;
  margin-left: 0.5em;
}

.reverse-ellipsis span {
  min-width: 100%;
  position: relative;
  display: inline-block;
  float: right;
  overflow: visible;
  background-color: inherit;
  text-indent: 0.5em;
}

.reverse-ellipsis span:before {
  content: '';
  position: absolute;
  display: inline-block;
  width: 1em;
  height: 1em;
  background-color: inherit;
  z-index: 200;
  left: -.5em;
}

The main problem with it is its length and the fact that the ellipsis looks a bit off.

Does anyone know of a shorter solution that keeps the ellipsis in line?

Answer 1

As per this documentation its possible now🤓. I have added an working example below.

{
  direction: rtl;
  text-overflow: ellipsis;
}

div {
  margin: 5px;
  background: #ccc;
  padding: 10px;
  width: 500px;
}

.box {
    line-height: 50px;
    border: 1px solid #000;
    overflow: hidden;
    white-space: nowrap;
    font-family: sans-serif;
    padding: 0 0.5em;
    text-align: left;
}

.el-normal {
  text-overflow: ellipsis;
}


.el-reverse {
  direction: rtl;
  text-overflow: ellipsis;
}

<div>
  <h3>Normal</h3>
  <p class="box el-normal">
  Getting this effect with CSS it's easy: This is a very long para We just just use text-overflow:ellipsis. However the reverse is a very long paragraph. seems less obvious.&lrm; 
  </p>
  <h3>Reverse</h3>
  <p class="box el-reverse">
  Getting this effect with CSS it's easy: This is a very long para We just just use text-overflow:ellipsis. However the reverse is a very long paragraph. seems less obvious?&lrm; 
  </p>
</div>

update:

As @jo-gro mentioned

doesn't work with punctuation. "Hello how are you?" becomes "?Hello how are you"... But you can add ‎ at the end of the string to fix this