在 html table 中截断字符串的另一端

Question

是否有 css / html 从字符串开头截断的方法？改为显示结束字符？

例如：

string = "A0000000982091011328885"

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

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

我也在 table td 中执行此操作，所以如果有一些奇怪的 table 具体 <element> 那就令人满意了。

Answer 1

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>

Answer 2

这是一个由 Roman Komarov 制作的 "reverse ellipsis" pen，它只使用纯 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;
}

在 html table 中截断字符串的另一端

Truncate opposite end of string inside html table

html

css

truncate