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?

Bendwise

Under what circumstances would you want to automatically trim to front of a string? In that context the horizontal ellipsis usually represents a continuation character, and you'd write content from the point where you left off previously, not automatically cut it due to space constraints. – Thimblerig

@Thimblerig I see what you mean, I suppose it would come in handy for pure aesthetics rather than functionality. – Bendwise

Read the comments of this article - codepen.io/kizu/pen/NPrbEQ – Silsby

You should paraphrase (and maybe demonstrate) the approaches described on the page you refer to and explain what is wrong with them for you. Just asking for solutions “better” than something described on an external page is really off-topic at SO. – Stool

@JukkaK.Korpela thanks, I've edited my question to fir your advice. – Bendwise

@Pinal cheers, I did have a look at that but the reverse ellipsis still looks slightly low. – Bendwise

@Thimblerig United States ▸ Washington State ▸ Ocean Shores ▸ Cop... vs ...tes ▸ Washington State ▸ Ocean Shores ▸ Copalis Beach – Inundate

@Thimblerig I got a path to file and i rather show user a end of the path than the start. ie. ...168.1.1/file.pdf than 192.168.1.1/f.... In my opinion question shuld be opened. It's not opinion based at all. – Topsyturvydom

Nothing about this question is "opinion-based". He's asking how to do something (the same thing I was searching for to get here). Just because people have access to the "close question" button makes them think they should mash it constantly for no reason. – Unicorn

For other people who find their way here, there was an answer posted that might work in limited cases: set direction: rtl. That can only be used for single lines since it'll break text if it wraps, but the point is to ellipsize text, so you're usually not wrapping. It's a hack, but it seems to work pretty well. (No idea why the answer was deleted, if there are any other gotchas he didn't say.) – Unicorn

Re: gotchas: direction: rtl works in Chrome, but not on iOS Safari, which moves the ellipsis to the left but still truncates the string at the end. YMMV. – Unicorn

It's an interesting case. I've seen this on mobile apps. Something could be done by JS to achieve this effect. – Belted

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

Hesione

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. – Morehouse

Hey @jo-gro thanks for sharing this, updated the answer to cover this use case. – Hesione