JSFiddle - React, Tailwind, and code Playground

HTML

<body>
    <br />
    <br />
    <div id="wrapper">
        <div id="intro">
            	<h1>jQuery.dotdotdot</h1>

            <p>Advanced cross-browser ellipsis for multiple line content.
                <br />Demo's and documentation: <a href="http://dotdotdot.frebsite.nl" target="_blank">dotdotdot.frebsite.nl</a>

            </p>
        </div>
        <div class="example">
            <p><strong>With an &quot;after&quot;-element:</strong>

            </p>
            <div class="l">
                <p class="before">before:</p>
                <div class="box before test" id="dot2">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.	<a href="javascript:void(0)" class="reader">Read more &raquo;</a>

                </div>
            </div>
            <div class="r">
                <p class="after">after:</p>
                <div class="box after test" id="dot3">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.	<a href="javascript:void(0)" class="reader">Read more &raquo;</a>

                </div>
            </div>
        </div>
    </div>
</body>

CSS

html, body {
			    padding: 0;
			    margin: 0;
			    height: 100%;
			}
			body, div, p {
			    font-family: Arial, Helvetica, Verdana;
			    color: #333;
			    -webkit-text-size-adjust: none;
			}
			body {
			    background-color: #f3f3f3;
			}
			a, a:link, a:active, a:visited {
			    color: black;
			    text-decoration: underline;
			}
			a:hover {
			    color: #9E1F63;
			}
			#wrapper {
			    background-color: #fff;
			    width: 600px;
			    padding: 50px 50px 0 50px;
			    margin: 0 auto;
			    border: 1px solid #ccc;
			    box-shadow: 0 0 5px #ccc;
			}
			#intro {
			    margin-bottom: 60px;
			}
			#intro p {
			    font-size: 18px;
			}
			div.example {
			    padding: 0 0 150px 0;
			}
			div.example:after {
			    content:'';
			    display: block;
			    clear: both;
			}
			div.example p {
			    margin: 0 0 10px 0;
			}
			div.l {
			    width: 275px;
			    float: left;
			}
			div.r {
			    width: 275px;
			    float: right;
			}
			div.box {
			    border: 1px solid #ccc;
			    height: 160px;
			    padding: 15px 20px 10px 20px;
			    /* 				overflow: hidden; */
			}
			div.resize {
			    padding-bottom: 250px;
			}
			div.resize div.box {
			    position: absolute;
			    width: 40%;
			    height: 100px;
			}
			div.resize div.box.before {
			    right: 50%;
			    margin-right: 10px;
			}
			div.resize div.box.after {
			    left: 50%;
			    margin-left: 10px;
			}
			div.box.before {
			    background-color: #ffeeee;
			}
			div.box.after {
			    background-color: #eeffee;
			}
			p.before {
			    color: #990000;
			}
			p.after {
			    color: #006600;
			}
			.pathname {
			    height: 25px;
			}

JavaScript

// dotdotdot plugin ahoy
(function (e) {
    function n(e, t, n) {
        var r = e.children(),
            i = false;
        e.empty();
        for (var o = 0, u = r.length; o < u; o++) {
            var a = r.eq(o);
            e.append(a);
            if (n) {
                e.append(n);
            }
            if (s(e, t)) {
                a.remove();
                i = true;
                break;
            } else {
                if (n) {
                    n.remove();
                }
            }
        }
        return i;
    }
    function r(t, n, o, u, a) {
        var f = t.contents(),
            l = false;
        t.empty();
        var c = "table, thead, tbody, tfoot, tr, col, colgroup, object, embed, param, ol, ul, dl, select, optgroup, option, textarea, script, style";
        for (var h = 0, p = f.length; h < p; h++) {
            if (l) {
                break;
            }
            var d = f[h],
                v = e(d);
            if (typeof d == "undefined") {
                continue
            }
            t.append(v);
            if (a) {
                t[t.is(c) ? "after" : "append"](a)
            }
            if (d.nodeType == 3) {
                if (s(o, u)) {
                    l = i(v, n, o, u, a)
                }
            } else {
                l = r(v, n, o, u, a)
            }
            if (!l) {
                if (a) {
                    a.remove()
                }
            }
        }
        return l
    }
    function i(e, t, n, r, u) {
        var l = false,
            c = e[0];
        if (typeof c == "undefined") {
            return false
        }
        var h = r.wrap == "letter" ? "" : " ",
            p = f(c).split(h),
            d = -1,
            v = -1,
            m = 0,
            g = p.length - 1;
        while (m <= g) {
            var y = Math.floor((m + g) / 2);
            if (y == v) {
                break
            }
            v = y;
            a(c,...