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;
}

  111222333444555666777888999

111222333444555666777888999

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