JSFiddle - React, Tailwind, and code Playground

by Warspawn

HTML

<div id="foo">Lorem ipsum <strong>la la la</strong>, foo beee too bee <em>wa wa wa</em>. honk bon akl kkk eee ff zoingks</div>

CSS

#foo {
    width: 100px;
    height: 60px;
}

JavaScript

$window = window;
function computeStyle(elem, prop) {
    if (!$window.getComputedStyle) {
        $window.getComputedStyle = function (el, pseudo) {
            this.el = el;
            this.getPropertyValue = function (prop) {
                var re = /(\-([a-z]){1})/g;
                if (prop === 'float') {
                    prop = 'styleFloat';
                }
                if (re.test(prop)) {
                    prop = prop.replace(re, function (douglas, crockford, lint) {
                        return lint.toUpperCase();
                    });
                }
                return el.currentStyle && el.currentStyle[prop] ? el.currentStyle[prop] : null;
            };
            return this;
        };
    }

    return $window.getComputedStyle(elem, null).getPropertyValue(prop);
}

/**
 * Returns the line-height of an element as an integer.
 */
function getLineHeight(elem) {
    var lh = computeStyle(elem, 'line-height');
    if (lh === 'normal') {
        // Normal line heights vary from browser to browser. The spec recommends
        // a value between 1.0 and 1.2 of the font size. Using 1.1 to split the diff.
        lh = parseInt(computeStyle(elem, 'font-size'), 10) * 1.2;
    }
    return parseInt(lh, 10);
}

/**
 * Returns the maximum number of lines of text that should be rendered based
 * on the current height of the element and the line-height of the text.
 */
function getMaxLines(element, height) {
    var availHeight = height || element.clientHeight,
        lineHeight = getLineHeight(element);

    return Math.max(Math.floor(availHeight / lineHeight), 0);
}

/**
 * Returns the maximum height a given element should have based on the line-
 * height of the text and the given clamp value.
 */
function getMaxHeight(element, clmp) {
    var lineHeight = getLineHeight(element);
    return lineHeight * clmp;
}

function getTextNodesIn(node, includeWhitespaceNodes) {
    var textNodes = [],
        whitespace = /^\s*$/;

    function...