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>
Comments
Post a Comment