左侧为Text-overflow省略号 - 薇晓朵文档中心

问题描述

我有一个路径列表 (由于缺乏一个更好的词，也许面包碎屑描述他们更好) 。一些值太长，不能显示在他们的父母中，所以我使用 text-overflow: ellipsis 。问题是，重要的信息在右边，所以我想要省略号出现在左边。像这样的这种艺术：

----------------------------
|first > second > third    |
|...second > third > fourth|
|...fifth > sixth > seventh|
----------------------------

请注意，第一行足够短，因此它保持左对齐，但其他两个太长，因此省略号出现在左侧。

我更喜欢 CSS 唯一的解决方案，但如果不能避免，JS 是好的。没问题，解决方案只适用于 Firefox 和 Chrome 。

编辑：在这一点上，我正在为 Chrome 中的错误寻找一个工作，以防止文档混合使用 RTL 和 LTR 时正常渲染。这一切都是我从一开始就真正需要的，我没有意识到。

最佳解决方案

怎么样这样的 jsFiddle？它使用方向，text-align 和 text-overflow 来获得左边的省略号。根据 MDN，可能有可能用 left-overflow-type 值在左侧指定省略号，但是它被认为仍然是实验性的。

CSS：

p {
    white-space: nowrap;
    overflow: hidden;              /* "overflow" value must be different from "visible" */
    text-overflow:    ellipsis;
    width:170px;
    border:1px solid #999;
    direction:rtl;
    text-align:left;
}

HTML：

<p>first > second > third<br />
second > third > fourth > fifth > sixth<br />
fifth > sixth > seventh > eighth > ninth</p>

次佳解决方案

我终于不得不破解并在 JavaScript 中做某事。我希望有人会想出一个 hail-mary CSS 解决方案，但人们似乎只是 up-voting 的答案应该是正确的，如果不是 Chrome 的错误。 j08691 可以为他的工作带来赏金。

<html>
    <head>
        <style>
            #container {
                width: 200px;
                border: 1px solid blue;
            }

            #container div {
                width: 100%;
                overflow: hidden;
                white-space: nowrap;
            }
        </style>
        <script>
            function trimRows() {

                var rows = document.getElementById('container').childNodes;
                for (var i=0, row; row = rows[i]; i++) {
                    if (row.scrollWidth > row.offsetWidth) {
                        var textNode = row.firstChild;
                        var value = '...' + textNode.nodeValue;
                        do {
                            value = '...' + value.substr(4);
                            textNode.nodeValue = value;

                        } while (row.scrollWidth > row.offsetWidth);
                    }
                }
            }
        </script>
    </head>
    <body onload='trimRows();'>
    <div id="container" >
        <div>first > second > third</div>
        <div>second > third > fourth > fifth > sixth</div>
        <div>fifth > sixth > seventh > eighth > ninth</div>
    </div>
    </body>

</html>

Fiddle

第三种解决方案

这是一个小车，但也许是一个正确的方向

http://jsfiddle.net/HerrSerker/ZfbaD/50/

<div class="container">
    <span class="part">second</span>
    <span class="part">&gt;</span>
    <span class="part">third</span>
    <span class="part">&gt;</span>
    <span class="part">fourth</span>
    <span class="part">&gt;</span>
    <span class="part">fifth</span>
    <span class="part">&gt;</span>
    <span class="part">sixth</span>
</div>

.container {
  white-space: nowrap;
  overflow: hidden;              /* "overflow" value must be different from "visible" */
  text-overflow: ellipsis;
    width:170px;
    border:1px solid #999;
    direction:rtl;
}
.container .part {
  direction:ltr;

}

参考文献

Text-overflow ellipsis on left side

注：本文内容整合自 Google/Baidu/Bing 辅助翻译的英文资料结果。如果您对结果不满意，可以加入我们改善翻译效果：薇晓朵技术论坛。

左侧为 Text-overflow 省略号