Tag: CSS

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) {

    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';
    }
});

Extracting CSS Selectors

Here is a function to get the CSS selector from an element:

var getElementSelector = function($el) {

	var selector 	= $el.get(0).tagName.toLowerCase();
	var id 			= $el.attr('id');
	var cssClass 	= $el.attr('class');

	if (id) 		selector += '#' + id;
	if (cssClass) 	selector += '.' + cssClass.replace(/ /g, '.');

	return selector;
};

If you have the following element in a jQuery object:
<span id="identifire" class="link-wrap">
And this jQuery object was:
$mySpan
Calling the function:
getElementSelector($mySpan)
Would return the string:
span#identifire.link-wrap

Here is another function to get the full CSS path of the element:

var getElementSelectorPath = function($el) {

	var path = getElementSelector($el);

	while($parent = $el.parent()) {

		var selector 	= getElementSelector($parent);

		if (selector.substr(0, 4) == 'html') 	return path;

		path 	= selector + ' > ' + path;
		$el 	= $parent;
	}
};

Note that this function has a dependency on the previous function getElementSelector.

Passing $mySpan to this function:
getElementSelectorPath($mySpan)
Would return a string something like this:
body > div#content-wrap > div#home > p.intro > span#identifire.link-wrap

Flip an Element

CSS class to flip an element horizontally:

.flip-horizontal {
	-moz-transform: scaleX(-1);
	-o-transform: scaleX(-1);
	-webkit-transform: scaleX(-1);
	transform: scaleX(-1);
	filter: FlipH;
	-ms-filter: "FlipH";
}

Vertically:

.flip-vertical {
	-moz-transform: scaleY(-1);
	-o-transform: scaleY(-1);
	-webkit-transform: scaleY(-1);
	transform: scaleY(-1);
	filter: FlipV;
	-ms-filter: "FlipV";
}

Links

Stack Overflow