JSFiddle - React, Tailwind, and code Playground

by Zeaklous

HTML

<div class="DivOuter">
    <ul class="Ulclass">
        <li class="LiSide">test test test
            <br>
            <br>
            <br>
            <br>kjldjlakjd
            <br>
        </li>
        <li class="Liclass LiTop">blah blah</li>
        <li class="Liclass LiTop">blah blah</li>
        <li class="Liclass LiTop">blah blah</li>
        <li class="Liclass">blah blah</li>
        <li class="Liclass">blah blah</li>
        <li class="Liclass cut">blah blah blah blah blah blahkfsjkfhsdkjfhsdkjfhksdjfhkdsjfhkjdshfkjsdhfjksdhfkjsdhfkjsdhfjksdhfjkdh</li>
    </ul>
</div>

CSS

.DivOuter {
    border-color: black;
    border-style: solid;
    border-width: 1px;
    display: block;
    width: 970px;
    overflow: hidden;
}
.Ulclass {
    height: 250px;
    line-height: 18px;
    list-style-type: none;
    margin-bottom: 0px;
    margin-left: 0px;
    margin-right: 0px;
    margin-top: 0px;
    padding-bottom: 0px;
    padding-left: 0px;
    padding-right: 0px;
    padding-top: 0px;
    text-align: left;
    width: 970px;
}
.Liclass {
    border-left-color: rgb(204, 204, 204);
    border-left-style: solid;
    border-left-width: 1px;
    color: rgb(51, 51, 51);
    display: inline-block;
    float:left;
    height: 110px;
    list-style-type: none;
    margin-bottom: 0px;
    margin-left: 0px;
    margin-right: 0px;
    margin-top: 0px;
    padding-bottom: 0px;
    padding-left: 4px;
    padding-right: 4px;
    padding-top: 14px;
    text-align: center;
    width: 290px;
    text-transform:uppercase;
}
.LiTop {
    border-bottom-color: rgb(204, 204, 204);
    border-bottom-style: solid;
    border-bottom-width: 1px;
    height: 111px;
}
.LiSide {
    color: #777;
    display: inline-block;
    float:left;
    font-family: Arial, Helvetica, HelveticaNeue, Verdana, sans-serif;
    font-size: 9px;
    font-style: normal;
    font-weight: bold;
    line-height:18px;
    height: 246px;
    list-style-type: none;
    margin-bottom: 0px;
    margin-left: 0px;
    margin-right: 0px;
    margin-top: 0px;
    padding-bottom: 0px;
    padding-left: 0px;
    padding-right: 0px;
    padding-top: 0px;
    text-align: center;
    width:64px;
}

JavaScript

var trans =  $('.Liclass.cut').css('text-transform');
var txt;
if( $('.Liclass.cut').css('text-transform') === 'uppercase')
    txt = $(".cut").html().toUpperCase();
else { txt = $(".cut").html(); }


trimText();

$(window).bind('resize', function () {
    trimText();
});

function trimText() {
    var totalWidth = $(this).width();
    var trimmedText = getTextThatFits(txt, totalWidth - 20, "Times New Roman", 12, trans);
    alert(trimmedText);
    $(".cut").html(trimmedText);
}

function getTextThatFits(txt, w, fSize, fName, fWeight, txtTrans) {
    if (fWeight === undefined) fWeight = "normal";

    var auxDiv = $("<div>").addClass("auxdiv").css({
        fontFamily: fName,
        fontSize: parseInt(fSize) + "px",
        position: "absolute",
        height: "auto",
        marginLeft: "-1000px",
        marginTop: "-1000px",
        fontWeight: fWeight,
        textTransform: txtTrans,
        width: "auto"
    })
        .appendTo($("body"))
        .html(txt);

    var ww = (auxDiv.width() + 1);
    var str = txt;

    auxDiv.html(" ...");
    var w2 = (auxDiv.width() + 1) + "px";
    if (w2 > w) {
        auxDiv.remove();
        return "";
    }

    if (ww > w) {
        var i = 1;
        var p, u;
        var sol = 0;
        p = 1;
        u = txt.length;

        while (p <= u) {
            i = (p + u) >> 1;
            str = txt.slice(0, i);
            str += "...";
            auxDiv.html(str);
            ww = (auxDiv.width() + 1);
            if (ww <= w) {
                sol = i;
                p = i + 1;
            } else u = i - 1;
        }

        str = txt.slice(0, sol) + "...";
    }
    $(".auxdiv").remove();
    auxDiv.remove();
    return str;
}