JSFiddle - React, Tailwind, and code Playground

by WilsonPage

HTML

<div class="ellipsis">
Aenean eget risus sed urna eleifend fermentum. Mauris iaculis lobortis rhoncus. Aliquam pellentesque, lorem ut commodo consequat, quam dolor varius sem, quis fermentum elit est sit amet neque. Sed mattis mollis sapien, vulputate interdum dupi commodo nec. Pellentesque mattis imperdiet massa, ut volutpat diam sodales mattis. Nunc tincidunt facilisis odio adipiscing tempus. Praesent commodo, dui quis molestie euismod, felis orci rutrum erat, a interdum mauris elit vel risus. Praesent scelerisque nulla a eros bibendum varius. Pellentesque faucibus, nisl a lacinia ultricies, arcu odio facilisis nibh, nec pulvinar sapien urna id dolor. Pellentesque consectetur imperdiet ligula vel dignissim. Proin lacinia ante sit amet quam pulvinar adipiscing. Nulla ligula nibh, vestibulum ac sollicitudin id, sollicitudin ac velit. Integer odio libero, interdum ut semper adipiscing, tempus in eros.
</div>


<div class="ellipsis">
    <p>Aenean eget risus sed urna eleifend fermentum. Mauris iaculis lobortis rhoncus. Aliquam pellentesque, lorem ut commodo consequat, quam dolor varius sem, quis fermentum elit est sit amet neque. Sed mattis mollis sapien, vulputate interdum dupi commodo nec. Pellentesque mattis imperdiet massa, ut volutpat diam sodales mattis. Nunc tincidunt facilisis odio adipiscing tempus.</p><p>Praesent commodo, dui quis molestie euismod, felis orci rutrum erat, a interdum mauris elit vel risus. Praesent scelerisque nulla a eros bibendum varius. Pellentesque faucibus, nisl a lacinia ultricies, arcu odio facilisis nibh, nec pulvinar sapien urna id dolor. Pellentesque consectetur imperdiet ligula vel dignissim.</p><p>Proin lacinia ante sit amet quam pulvinar adipiscing. Nulla ligula nibh, vestibulum ac sollicitudin id, sollicitudin ac velit. Integer odio libero, interdum ut semper adipiscing, tempus in eros.</p>
</div>

CSS

div {
    height: 150px;
    overflow: hidden;
    -webkit-column-count: 2;
}

JavaScript

function fillWithText(node, text, maxHeight) {


}


function ellipsis() {
    var nodes = document.getElementsByClassName('ellipsis'),
        node, clone, container, text, height;

    for (var i = 0, l = nodes.length; i < l; i++) {
        node = nodes[i];
        clone = node.cloneNode();
        container = node.parentNode;


        if (!node.storage) node.storage = node.innerHTML;

        text = node.storage.split(' ');

        container.style.position = 'relative';
        clone.style.position = 'absolute';
        clone.style.left = '0';
        clone.style.top = '0';
        clone.style.right = '0';
        clone.style.height = 'auto';
        clone.style.visibility = 'hidden';
        
        

        height = node.clientHeight;

        container.appendChild(clone);

        var wordIndex = 0,
            numWords = text.length,
            withinBounds = true,
            str = "";

        while (wordIndex <= numWords) {

            str += text[wordIndex] + ' ';
            clone.innerHTML = str;

            //console.log(clone.clientHeight);

            if (clone.clientHeight > height) {
                break;
            }

            wordIndex++;

        }
        
        var lastIndex = str.trim().lastIndexOf(' ');
        str = str.substring(0, lastIndex + 1);
        
        node.innerHTML = str + '...';




        console.log(str);
        
        container.removeChild(clone);



    }


}


ellipsis();

var t;
window.addEventListener('resize', function() {
    clearTimeout(t);
    t = setTimeout(ellipsis, 100);
});