CODEWITHSUNDEEP
htmlcsstruncate
8eecf0d2
8eecf0d2

Reputation: 1579

Truncate opposite end of string inside html table

Is there a css / html way of truncating the from the start of a string? Showing the end characters instead?

For example:

string = "A0000000982091011328885"

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

I've tried changing the text direction but apart from that I'm out of ideas. I am completely capable of doing this in Javascript however it'd be nice not to.

I'm also doing this within a table td, so if there is some weird table specific <element> that'd be satisfactory.

Upvotes: 2

Views: 501

Answers (2)

Arnelle Balane
Arnelle Balane

Reputation: 5487

Here is a "reverse ellipsis" pen made by Roman Komarov which does exactly what you want using just pure CSS. It just requires a specific HTML markup in order to work.

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

It also uses pseudo-elements as the ellipsis and positioned them at the start of the text.

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

Upvotes: 2

Bhola Nath Mahto
Bhola Nath Mahto

Reputation: 484

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>

Upvotes: 2

Related Questions