Text overflow with ellipsis on the left [duplicate]

Answer 1

To get this effect you have to use a little hack. See the following example:

p {
  border:1px solid #000;
  width:150px;
}
.ellipsis {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.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;
}

<p class="ellipsis reverse-ellipsis">
  <span>111222333444555666777888999</span>
</p>
<p class="ellipsis">111222333444555666777888999</p>

More information about this you can find here: http://hugogiraudel.com/2014/12/16/css-riddle-reverse-ellipsis/

Answer 2

You can set the direction of text from right to left using css direction property direction: rtl:

.l {
  text-align: left;
  direction: rtl;
}
.r {
  text-align: right;
}
p {
  width: 150px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  border: solid 1px green;
}

<p class="l">111222333444555666777888999</p>
<p class="r">111222333444555666777888999</p>

direction

Set the direction CSS property to match the direction of the text: rtl for languages written from right-to-left (like Hebrew or Arabic) text and ltr for other scripts. This is typically done as part of the document (e.g., using the dir attribute in HTML) rather than through direct use of CSS.

References

MDN direction