Multi-line Text Ellipsis

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) { = '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(' ')
            .join(' ')
        el.innerHTML = text;
        elH = el.getBoundingClientRect().height;

    if (isOverflow) {
        title.innerHTML += ' ...'; = titleMaxH + 'px';

Keyboard Tabbing to Anchors with jQuery

Working on keyboard accessibility the other day, I found out that an anchor will receive focus if you tab to it but will only trigger a jQuery click event if the anchor has an href attribute.

	Doesn't work with return/enter key
</a><br />

<a href="#keyboard-click-event">
	It works!
</a><br />

To trigger a click event using keyboard, tab to the element and press return/enter key.