左侧文本溢出省略号

小编典典

左侧文本溢出省略号

javascript

我有一条路径列表（由于缺少更好的词，也许面包屑痕迹可以更好地描述它们）。有些值太长而无法在其父项中显示，因此我正在使用text-overflow: ellipsis。问题在于重要信息在右侧，因此我希望省略号出现在左侧。像这样的ASCII艺术：

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

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

我更喜欢仅CSS的解决方案，但是如果无法避免，JS很好。如果该解决方案仅适用于Firefox和Chrome，则可以。

编辑：在这一点上，我正在寻找解决Chrome中的错误的方法，这些错误会在文档混合了RTL和LTR时阻止其正确呈现。
从一开始我就是真正需要的，我只是没有意识到。

阅读 293

2020-05-01

共1个答案

小编典典

我终于不得不破解并用JavaScript做一些事情。我希望有人会提出一个冰雹般的CSS解决方案，但人们似乎只是在投票赞成如果不是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>

2020-05-01