text ellipsis

Truncate text with ellipsis. All with vanillaJS

by María Fernández

HTML

<button onClick="applyEllipsis()">click to apply ellipsis</button>
<div id="publication-popup show">
    <div id="publication-popup-frame">
	<div>
		<h1>Is this your publication?</h1>
		<div class="title" id="title">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas lobortis purus facilisis, interdum diam id, rhoncus turpis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Donec ullamcorper orci nulla, id maximus neque commodo eu. Nullam elit sapien, placerat id congue semper, imperdiet vitae erat. Proin sit amet ultrices dui, nec porta libero. Praesent porttitor sem ut sagittis venenatis. Suspendisse ante elit, feugiat ut dictum sit amet, tincidunt id nunc. Aenean quis libero quam. Curabitur diam mauris, tempus eget tincidunt et, pretium sed orci. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Maecenas sit amet diam eu augue volutpat feugiat a at dui. Etiam id neque id nisl vehicula viverra id quis sapien.</div>
		<ul class="authors">
			<li>Moiraine Damodred</li>
			<li>Lan Mandragoran</li>
            <li>Mat Cauthon</li>
            <li>Rand al'Thor</li>
            <li>Perrin Aybara</li>
            <li>Egwene al'Vere</li>
            <li>Nynaeve al'Meara</li>
		</ul>
	</div>
</div>
</div>

CSS

#publication-popup {
    display: none;
}

#publication-popup.show {
    display: block;
}

.title {
    width: 90%;
    height: 50px;
    min-height: 22px;
	max-height: 66px;
	//overflow: hidden;
    background:pink;
    font-size:14px;
}

.title div {
    word-wrap: normal;
}

JavaScript

// Basic function that truncates a text in a div element until the text fits the client height & width, adding ellipsis at the end.

// Save original text to allow re-applyEllipsis when resizing window
// To make resize cleanest, uncomment overflow:hidden; line in css (it is commented to see the actual overflow happening)
var originalText = document.getElementById('title').innerHTML,
    resizeTimer;

function applyEllipsis() {
	var titleEl = document.getElementById('title'),
    	scrollHeight = titleEl.scrollHeight,
    	scrollWidth = titleEl.scrollWidth,
        offsetHeight = titleEl.offsetHeight,
        offsetWidth = titleEl.offsetWidth,
        // The text truncation is made character by character. It can be done word by word splitting the array
        // by blank space.
    	textArr = originalText.split('');
    
	console.log('scrollHeight: ' + titleEl.scrollHeight);
    console.log('scrollWidth: ' + titleEl.scrollWidth);
	console.log('offsetHeight: ' + titleEl.offsetHeight);
    console.log('offsetWidth: ' + titleEl.offsetWidth);
	
    console.log('text in an array: ' + textArr);

    // Meat and potatoes
	while(scrollHeight > offsetHeight || scrollWidth > offsetWidth) {
		textArr.pop();
    	var newText = textArr.join('') + '...';
    	titleEl.innerHTML = newText;
    	scrollHeight = titleEl.scrollHeight;
    	scrollWidth = titleEl.scrollWidth;
	}
}

// This piece of code allows re-applyEllipsis when resizing window
window.onresize = function(event) {
    clearTimeout(resizeTimer);
  	resizeTimer = setTimeout(function() {
    // Resizing has "stopped" now
    document.getElementById('title').innerHTML = originalText;
    applyEllipsis();      
  	}, 200);	
}