Question

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

例如：

string = "A0000000982091011328885"

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

我已尝试更改文字direction，但除此之外我没有想法。我完全有能力在Javascript中做到这一点，但它不是很好。

我也在table td内执行此操作，因此如果有一些奇怪的表格<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表中字符串的另一端

2 个答案: