截断 html 表中字符串的右端

Question

有没有一种 css/html 方法来截断字符串开头的？改为显示结尾字符？

例如：

string = "A0000000982091011328885"
truncated (show start) = "A000000098..."
truncated (show end) = "...1011328885"

我尝试更改文本direction但除此之外，我没有想法。我完全有能力在 Javascript 中做到这一点，但最好不要这样做。

我也在table td内执行此操作，所以如果有一些奇怪的表特定<element>那将是令人满意的。

Answer 1

这是一支由Roman Komarov制作的"反向省略号"笔，它只使用纯CSS就可以完成您想要的操作。它只需要一个特定的HTML标记才能工作。

<div class="box  ellipsis  reverse-ellipsis">
    <div class="ellipsis__content">Here is some long content that doesn't fit.</div>
</div>

它还使用伪元素作为省略号，并将它们放置在文本的开头。

.reverse-ellipsis::after {
    content: "…";
    float: left;
    width: 1em;
    padding: 0 1px 0 1em;
    margin: -1.35em -1em;
    background: #FFF;
}

Answer 2

var rows = document.getElementById('container').childNodes;
for (var i=0, row; row = rows[i]; i++) {
    trimLeft(row);
}
function trimLeft(row){
    var trimContents = function(row, node){
        while (row.scrollWidth > row.offsetWidth) {
            
            var childNode = node.firstChild;
            
            if (!childNode)
                return true;
            
            if (childNode.nodeType == document.TEXT_NODE){
                trimText(row, node, childNode);
            }
            else {
                var empty = trimContents(row, childNode);
                if (empty){
                    node.removeChild(childNode);
                }
            }
        }
    }
    var trimText = function(row, node, textNode){
        var value = '...' + textNode.nodeValue;
        do {
            value = '...' + value.substr(4);
            textNode.nodeValue = value;
            
            if (value == '...'){
                node.removeChild(textNode);
                return;
            }
        }
        while (row.scrollWidth > row.offsetWidth);
    }
    trimContents(row, row);    
}

#container {
    width: 200px;
    border: 1px solid blue;
}
#container div {
    width: 100%;
    overflow: hidden;
    white-space: nowrap;
}

<div id="container" >
    
    <div>A00000009sfsgsdfggdsf1011328885</div>
   
 </div>