JSFiddle - React, Tailwind, and code Playground

by notme

HTML

<div>
        <img src="http://upload.wikimedia.org/wikipedia/commons/thumb/6/6e/HTML5-logo.svg/220px-HTML5-logo.svg.png" />
<div class="node-title">
<div class="node-title">
    <div class="node-title-text">
        <a href="#">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed suscipit fermentum leo eu scelerisque. Maecenas dapibus, lacus ut aliquam viverra, erat ante congue ante, viverra cursus tellus velit a felis. Nullam eleifend dui eget felis porttitor lacinia. Sed sed augue enim, vitae  coltrices tincidunt. Donec dapibus pellentesque dui sit amet facilisis. </a>
    </div>
</div>
</div>

<div>
    <div class="node-title-text">
        <a href="#">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed suscipit </a>
    </div>
</div>

<div class="node-title">
    <div class="node-title-text">
        <a href="#">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed suscipit fermentum leo eu scelerisque. Maecenas dapibus, lacus ut aliquam viverra, erat ante congue ante, viverra cursus tellus velit a felis. Null </a>
    </div>
</div>

CSS

.extra_span {
    background: url('http://i.imgur.com/HPofR.png') top left no-repeat,
        url('http://i.imgur.com/C8ImH.png') top right no-repeat,
        url('http://i.imgur.com/9is9r.png') top center repeat-x;

}

JavaScript

jQuery.fn.line = function(line) {

    var dummy = this.clone().css({
        top: -9999,
        left: -9999,
        position: 'absolute',
        width: this.width()
    }).appendTo(this.parent()),
        text = dummy.text().match(/\S+\s+/g);

    var words = text.length,
        lastTopOffset = 0,
        lineNumber = 0,
        ret = '',
        found = false;

    for (var i = 0; i < words; ++i) {

        dummy.html(
        text.slice(0, i).join('') + text[i].replace(/(\S)/, '$1<span/>') + text.slice(i + 1).join(''));

        var topOffset = jQuery('span', dummy).offset().top;

        if (topOffset !== lastTopOffset) {
            lineNumber += 1;
        }

        lastTopOffset = topOffset;

        if (lineNumber === line) {

            found = true;
            ret += text[i];

        } else {

            if (found) {
                break;
            }

        }

    }

    dummy.remove();
    return ret;

};

$('div.node-title-text').each(function(index) {

    var i = 1;
    var n = 1;

    while ($(this).line(n)) {
        n++;
    }

    var pheight = $(this).parent().height() / n;

    while ($(this).line(i)) {
        var line_text = $(this).line(i);
        var new_span = $('<span class="extra_span">' + line_text + '</span>');
        $(this).append(new_span);
        var span_width = $(this).find('span:last').width();
        var ltop = (pheight * (i - 1));
        $(this).find('span:last').remove();
        new_span.text('');
        new_span.width(span_width);
        new_span.height(pheight);
        new_span.css({
            display: 'block',
            position: 'absolute',
            top: ltop,
            left: 0
        });
        $(this).append(new_span);
        i++;
    }

});