CSS can only add ellipsis to a single line of text. Here’s how to do it in Javascript using lodash:
// Update wrapping text to limit the number of lines. var maxLines = 2; var textEls = document.getElementsByClassName('text-els-class'); var textMaxH = Math.ceil(textEls[0].getBoundingClientRect().height) * maxLines; _.forEach(textEls, function(el) { el.style.whiteSpace = 'normal'; var elH = el.getBoundingClientRect().height; var isOverflow = elH > textMaxH; var text = el.innerHTML; // Remove the last word until the height is within bounds. while (elH > textMaxH) { text = (text .split(' ') .slice(0,-1) .join(' ') ); el.innerHTML = text; elH = el.getBoundingClientRect().height; } if (isOverflow) { title.innerHTML += ' ...'; title.style.maxHeight = titleMaxH + 'px'; } });