Truncate text to fit the container vanilla JS

by valk

HTML

<div id="outer">
<p id='inner'>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin nisi ligula, dapibus a volutpat sit amet, mattis et dui. Nunc porttitor accumsan orci id luctus. Phasellus ipsum metus, tincidunt non rhoncus id, dictum a lectus. Nam sed ipsum a lacus sodales eleifend. Vestibulum lorem felis, rhoncus elementum vestibulum eget, dictum ut velit. Nullam venenatis, elit in suscipit imperdiet, orci purus posuere mauris, quis adipiscing ipsum urna ac quam.</p>  
</div>

CSS

#outer { width: 250px; height: 100px; overflow: hidden; }
#inner { padding: 10px; margin: 0; }

JavaScript

function $(id) {
  return document.getElementById(id);
}

var p=$('inner');
var divh=parseFloat(getComputedStyle($('outer'), null).height.replace("px", ""))

while (p.offsetHeight>divh) {
    p.textContent =  p.textContent.replace(/\W*\s(\S)*$/, '...');
}