元素溢出方向从右到左的问题

Question

我需要为库视图制作一个章节标题，格式如下：[章节名称][...

/章节路径/章节路径/章节路径/]

棘手的是我需要隐藏章节路径的开头（添加...在开始时）当div 由于窗口大小调整而变得太小时。

在这个例子中，我成功地做到了：http://jsfiddle.net/dsg7pLm6/6/

当您在jsfiddle中调整结果窗口的大小{使其变小}时，左侧的章节路径被裁剪，这很好，但问题是单个元素（章节父母）被裁剪在右侧而不是左侧！

例如，完整路径为：

 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;

到章节父母，但它只是忽略它

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