Элемент направление переполнения справа налево проблемы

Question

мне нужно сделать заголовок раздела для представления библиотеки с форматом: [имя главы] [.../глава путь/глава путь/глава путь /]

в что мне нужно скрыть начало пути главы (добавьте ... в начале), когда div становится слишком маленьким из-за изменения размера окна.

Я успешно удалось сделать это в этом примере: http://jsfiddle.net/dsg7pLm6/6/

При изменении размеров окна Результат {сделать его меньше} в jsfiddle главе пути на левой стороне становится подстриженными, что хорошо, но проблема в том, отдельные элементы (chapterParents) обрезаются с правой стороны, а не с левой стороны!

, например, полный путь:

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

если вы сделаете окно результата меньше в jsfiddle вы получите {глава путь обрезается):

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

         ^^^^ 

, но должно быть

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

         ^^^^ 

Я попытался применить:

direction: rtl; 
text-alig: right; 

к chapterParents, но это просто игнорируя его

Answer 1

По крайней мере, мне удалось решить с помощью 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; 
    } 

и изменил код:

  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');