JSFiddle - React, Tailwind, and code Playground

by WilsonPage

HTML

<div class="columns">
            <div class="column">
                <h1>Without ellipsis</h1>
                <div class="content">
                    <p class="">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi at tincidunt mauris. Cras ac nibh id ante pharetra egestas. Maecenas pharetra augue ut erat tempor at rhoncus mi tincidunt. Nulla at erat sem. Nam id sem enim, at tincidunt mauris. Nunc ut magna arcu, ac blandit mauris. Nunc in sapien enim. Quisque dui orci, hendrerit id hendrerit eget, tristique ut urna. Donec adipiscing lectus ut velit ullamcorper vehicula. Suspendisse potenti.</p>
                </div>
                <div class="content">
                    <p class="multiline">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 dui 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.</p>
                </div>
                <div class="content">
                    <p class="multiline">Nulla sapien urna, pharetra nec hendrerit quis, elementum id purus. Cras vitae lectus lectus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aliquam sed nibh eu mi accumsan ultricies. Sed cursus faucibus dignissim. Nam venenatis velit...

CSS

.clear { clear: both; }
.columns .column {
    float: left;
    margin: 0 20px 0 0;
}

/* Setup content panels */
.content {
    margin: 0 0 10px;
    border: 1px dashed #888;
    padding: 10px;
    line-height: 20px;
}

.content p {
    overflow: hidden;   /* Overflow hidden is required for plugin. */
    margin: 0;
    padding: 0;
    -webkit-column-count: 2;
}
.content p.multiline {
    height: 80px;       /* Height is required for multiple lines to set line limit. */
}

JavaScript

/**
 * jQuery Ellipsis Plugin
 *
 * Copyright 2011 Tim Savage - Sakura Sky
 */
(function($) {
    $.fn.ellipsis = function(options) {
        options = $.extend({
            'ellipsis': '...',
            'multilineClass': 'multiline',
            'trimFunction': $.fn.ellipsis.trimToWord
        }, options);

        return this.each(function() {
            var el = $(this);

            if (el.css("overflow") === "hidden") {
                // Clone current background and get content
                var storedText = el.data('storage'),
                    text = storedText || el.html(),
                    multiline = el.hasClass(options.multilineClass),
                    t = $(this.cloneNode(true))
                        .hide()
                        .css({
                            'position': 'absolute',
                            'overflow': 'visible'
                        })
                        .width(multiline ? el.width() : 'auto')
                        .height(multiline ? 'auto' : el.height());
                el.after(t);
                
                if (!storedText) {   
                    el.data('storage', text);
                }
                
                

                // Calculate size of content
                function height() { return t.height() > el.height(); }
                function width() { return t.width() > el.width(); }
                var func = multiline ? height : width;

                // Fit content to panel
                while (text.length > 0 && func()) {
                    text = text.substr(0, text.length - 1);
                    t.html(text + options.ellipsis);
                }
                
                console.log(t.html());

                // Setup content, clean up.
                el.html(options.trimFunction(t.html()));
                t.remove();
            }
        });
    };

    // Trim the text to length (will remove extra spaces etc)
    $.fn.ellipsis.trimToLength =...