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

Question

我需要为库 View 制作章节标题，格式如下:[章节名称][.../章节路径/章节路径/章节路径/]

棘手的是，当 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');