在html表格中截斷字符串的另一端

Question

是否存在從字符串的開始處截斷字符串的css/html方法？顯示結束字符？

例如：

string = "A0000000982091011328885" 

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

我試圖改變文本direction但除此之外，我的想法。我完全有能力做到這一點，但它不會很好。

我也在做這個table td，所以如果有一些奇怪的表具體<element>這將是令人滿意的。

Answer 1

這裏是羅馬科馬羅夫做出哪些是你想要只使用純CSS正是一個"reverse ellipsis" pen。它只是需要一個特定的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>