css - 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 most digits only change once per epoch!)

Everyone knows CSS provides a RIGHT truncation with "text-overflow: ellipsis;". How (without adding code to the server to prepare that field via string-surgery) do we truncate the field on the LEFT, and put the "..." elipses on the LEFT?

(CSS3 is okay.)

Answer 1

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