Element overflow direction right to left problems

Question

I need to make a chapter header for a library view with the format: [chapter name][... / chapter path / chapter path / chapter path / ]

the tricky thing is that i need to hide the beginning of the chapter path(add ... at the beginning) when the div becomes too small because of window resizing.

I successfully managed to do it in this example: http://jsfiddle.net/dsg7pLm6/6/

When you resize the Result window{make it smaller} in jsfiddle the chapter path on the left side is getting cropped which is good but the problem is the individual elements (chapterParents) are getting cropped on the right side instead of the left side !

for example the full path is:

 Chapter name ( / asdas / New chapter / New chapter / Even Even more / Even more / Even even more / lalala lalalla lalalal / )

if you make the result window smaller in jsfiddle you get {the chapter path is cropped):

 Chapter name (  ...Even ev / lalala lalalla lalalal / )

                      ^^^^

but is should be

 Chapter name ( ...ven more / lalala lalalla lalalal / )

                      ^^^^

i tried to apply:

 direction: rtl;
 text-alig: right;

to chapterParents but it's just ignoring it

Answer 1

At least I managed to solve it using flexbox !

  .chapterBlock {
        height: 20px; 
        overflow: hidden; 
        white-space: nowrap;
        text-overflow: ellipsis;
        display: flex;
        display: -webkit-box;
        display: -moz-box;
        display: -webkit-flexbox;
        display: -ms-flexbox;
        display: -webkit-flex;
  }

  .chapterPathElement { 
        flex-shrink: 0;
        -webkit-flex-shrink: 0;
  }

and changed the code to:

            if (elObj.css('direction') == 'ltr' && scope.isOverflowing)
                elObj.children().each(function(i,li){elObj.prepend(li)});

            if (!scope.isOverflowing && elObj.css('direction') == 'rtl')
                elObj.children().each(function(i,li){elObj.prepend(li)});
            elObj.css('direction', (scope.isOverflowing) ? 'rtl' : 'ltr');
            elObj.css('text-overflow', (scope.isOverflowing) ?  'ellipsis' : 'initial');