問題描述

我有一個路徑列表 (由於缺乏一個更好的詞，也許麪包碎屑描述他們更好) 。一些值太長，不能顯示在他們的父母中，所以我使用 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;

}

參考文獻

注：本文內容整合自 Google/Baidu/Bing 輔助翻譯的英文資料結果。如果您對結果不滿意，可以加入我們改善翻譯效果：薇曉朵技術論壇。