Question

我需要使用以下格式为库视图创建章节标题： [章节名称] [... /章节路径/章节路径/章节路径/]

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

我成功设法在此示例中执行此操作： http://jsfiddle.net/dsg7pLm6/6/

当您在jsfiddle中调整结果窗口{make it smaller}的大小时，左侧的章节路径会被裁剪，这很好，但问题是各个元素（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;

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

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

1 个答案: