I need an overflow to truncate from the left, with ellipses

Question

Briefly, I have a field where the rightmost digits are most significant. (Naturally, this field comes from our affiliates\' systems, based on their primary keys, so the left

Answer 1

I am unable to test it now, but I am pretty certain that adding

direction: rtl;

will do the expected result.

Answer 2

Try to use this trick:

HTML

<p class="ellipsis">ert3452654546</p>

CSS

.ellipsis {
    overflow: hidden;
    width: 60px;
    direction: rtl; 
    margin-left: 15px;
    white-space: nowrap;
}

.ellipsis:after {
    position: absolute;
    left: 0px;
    content: "...";
}​

FIDDLE

Answer 3

You can use a css class to have this kind of behavior like:

.responsive-text {
  display: inline-block;
  vertical-align: middle;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  direction: rtl;
  width: 100%;
}

You only have to define the size of the container of this text and every time that the text inside doesn't fill in only one line, it's going to truncate the text and adds ... at the beginning.