JSFiddle - React, Tailwind, and code Playground

by octavioamu

HTML

<div data-truncatehash="4">0x0a2b3a08d5ab70d2091c985933eed7fab9c67022</div>
<div data-truncatehash="4">1234567891233456789</div>
<div data-truncatehash="3">1234567891233456789asd</div>
<div data-truncatehash="2">1234567891233456789asd</div>
<div data-truncatehash>1234567891233456789asd</div>
<p data-truncatehash="20">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos numquam doloremque reprehenderit vitae neque, illum eaque impedit, magni consectetur consequuntur quae sint nihil qui vero, atque distinctio. Aliquam, odio, rerum.</p>

JavaScript

(function (){
  this.truncate = function(elem,number) {
    var number = !number ? number = 4 : number
    var content = elem.textContent.trim();
    content =  content.substr(0,number)+ '\u2026'+ content.substr(-number)
    elem.textContent = content
  }
	  
  this.truncateHash = function () {
  	var elem = document.querySelectorAll('[data-truncatehash]')
    for (var i = 0; i < elem.length; ++i) {
      new truncate(elem[i],elem[i].dataset.truncatehash)
    }
  }
}())

new truncateHash()