JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://dl.dropboxusercontent.com/u/64454818/TMP/jquery.dotdotdot.min.js"></script>
<div id="bar">Lorem impsum amet foobar i dont know the latin stuff anyway here goes a long text hello how are you pretty cool, huh? I am a long text that runs outta the div. Cool, yo!</div>

CSS

#foo, #bar {
    width: 200px;
    height: 30px;
    background: yellow;
    //overflow: hidden;
}

JavaScript

$(function () {

    var obj;

    obj = $('#bar');
    doEllipsis(obj, ' ', 4);

    setTimeout(function () {

        $('#bar').css('width', 500);
        updateEllipsis($('#bar'));

    }, 2000);
});

// position = no. of words to leave at end
function doEllipsis(element, spacer, position) {
    $(element).data('ell-orig', $(element).html());
    $(element).data('ell-spacer', spacer);
    $(element).data('ell-pos', position);
    
    var pieces = $(element).html().split(spacer);
    if (pieces.length > 1) {

        var building = "";

        var i = 0;
        
        // for "position" to mean "fraction where to wrap" (eg. 0.6), use this:
        // for (; i < pieces.length*position; i++) {        
        for (; i < pieces.length-position; i++) {
            building += pieces[i] + spacer;
        }

        building += '<span class="ell">';

        for (; i < pieces.length; i++) {
            building += pieces[i] + spacer;
        }

        building += '</span>';

        $(element).html(building);
        
        $(element).dotdotdot({
            after: 'span.ell',
            wrap: 'letter'
        });
    }
}

function updateEllipsis(element) {
    var orig = $(element).data('ell-orig');
    var spacer = $(element).data('ell-spacer');
    var pos = $(element).data('ell-pos');

    $(element).trigger("destroy");
    $(element).empty();

    $(element).html(orig);

    doEllipsis(element, spacer, pos);
}