Count visible characters in overflow'd div
HTML
<div>Lorem ipsum dolor sit amet, athenagoram rigorem nisl cum magna anima te ad quia ad suis. Supervenit discrimina materialitas filia dedit erat, pertulit sed eu fugiens laudo misera Tharsia. Mancipia dolor invenerit adduci in fuerat accidens quam crucis coniunx, post discipulae venit est Apollonius mihi quidditas tuo dolor ad suis. Quodsi animae tertio eam ad te in. Dicis ubi diu requievit agi coepit.</div>
CSS
div {
width: 100px;
overflow: hidden;
white-space: nowrap;
}
JavaScript
var div = document.getElementsByTagName('div')[0];
var numc = count_visible(div);
// You can do something like this to hide partially visible characters
// div.childNodes[0].data = div.childNodes[0].data.substr(0,numc);
alert(numc + ' completely visible characters!');
function count_visible(el){
var padding, em, numc;
var text = el.childNodes[0].data;
var max = el.clientWidth;
var tmp = document.createElement('span');
var node = document.createTextNode('i');
tmp.appendChild(node);
document.body.appendChild(tmp);
if(getComputedStyle)
tmp.style.cssText = getComputedStyle(el, null).cssText;
else if(el.currentStyle)
tmp.style.cssText = el.currentStyle.cssText;
tmp.style.position = 'absolute';
tmp.style.overflow = 'visible';
tmp.style.width = 'auto';
// Estimate number of characters that can fit.
padding = tmp.style.padding;
tmp.style.padding = '0';
tmp.innerHTML = 'M';
el.parentNode.appendChild(tmp);
em = tmp.clientWidth;
tmp.style.padding = padding;
numc = Math.floor(max/em);
var width = tmp.clientWidth;
// Add characters until we reach overflow width
while(width < max && numc <= text.length){
node.data = text.substring(0, ++numc);
width = tmp.clientWidth;
}
// Remove characters until we no longer have overflow
while(width > max && numc){
node.data = text.substring(0, --numc);
width = tmp.clientWidth;
}
// Remove temporary div
document.body.removeChild(tmp);
return numc;
}