breadcrumbs - Show end of text when overflow in CSS -

i have breadcrumbs on website (| symbolises area have it):

| home -> thing -> deeper thing                                            | 

currently, has overflow: hidden set, when becomes long, results in:

| home -> thing -> deeper thing -> page long , import| 

what i'm trying achieve hide beginning of text instead of end, should be:

| me thing -> deeper thing -> page long , important title | 

how that?

you can 2 divs , simple javascript this:

window.onload = function(){    var inner = document.getelementbyid("inner").offsetwidth;    var outer = document.getelementbyid("outer").offsetwidth;    if(outer > inner)      document.getelementbyid("inner").style.left = 0;  }

#outer {    overflow: hidden;    width: 500px;    height: 20px;    position: absolute;  }  #inner {    white-space: nowrap;    position: absolute;    right: 0;  }

<div id="outer"><div id="inner">home -> thing -> deeper thing -> page long , important title</div></div>