Show end of text when overflow in CSS

Question

I have a breadcrumbs on my website (| symbolises the area I have for it):

| Home -> Some thing -> Some deeper thing                                            |

Currently, it has overflow: hidden set, so when it becomes too long, it results in:

| Home -> Some thing -> Some deeper thing -> Some page with very long and very import|

What I'm trying to achieve is to hide the beginning of the text instead of the end, so it should be:

| me thing -> Some deeper thing -> Some page with very long and very important title |

How to do that?

possible duplicate of [Overflow to left instead of right](http://stackoverflow.com/questions/218065/overflow-to-left-instead-of-right) — Laurent S., Sep 23 '14 at 19:51
In the question @Bartdude linked to, the text is aligned to the right all the time. I want it to be aligned to the left if it fits the area what changes the problem drammatically. — fracz, Sep 23 '14 at 19:57

imtheman · Accepted Answer · 2014-09-23T20:12:16.823

2

You can do it with 2 divs and some simple javascript like 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 -> Some thing -> Some deeper thing -> Some page with very long and very important title</div></div>

edited Sep 23 '14 at 20:12

answered Sep 23 '14 at 19:56

imtheman

4,713
1
30
30

This always aligns text to the right, which is not desired in my case. – fracz Sep 23 '14 at 19:59
Take a look at my update. If you change the outer div to say 1000px, it will stay to the left. – imtheman Sep 23 '14 at 20:07

Show end of text when overflow in CSS

1 Answers1