JSFiddle - React, Tailwind, and code Playground

by Luke Marlow

HTML

<div class="comment-box" style="float: left; margin-right: 2px; margin-bottom: 2px; ">
    <div class="comment-inner">PO</div>
</div>
<div class="comment-box" style="float: left; margin-right: 2px; margin-bottom: 2px; ">
    <div class="comment-inner">QV</div>
</div>
<div class="comment-box" style="float: left; margin-right: 2px; margin-bottom: 2px; ">
    <div class="comment-inner">JG</div>
</div>
<div class="comment-box" style="float: left; margin-right: 2px; margin-bottom: 2px; ">
    <div class="comment-inner">TT</div>
</div>
<div class="comment-box" style="float: left; margin-right: 2px; margin-bottom: 2px; ">
    <div class="comment-inner">JU</div>
</div>
<div class="comment-box" style="float: left; margin-right: 2px; margin-bottom: 2px; ">
    <div class="comment-inner">SL</div>
</div>
<div class="comment-box" style="float: left; margin-right: 2px; margin-bottom: 2px; ">
    <div class="comment-inner">ZC</div>
</div>
<div class="comment-box" style="float: left; margin-right: 2px; margin-bottom: 2px; ">
    <div class="comment-inner">ZH</div>
</div>
<div class="comment-box" style="float: left; margin-right: 2px; margin-bottom: 2px; ">
    <div class="comment-inner">CT</div>
</div>
<div class="comment-box" style="float: left; margin-right: 2px; margin-bottom: 2px; ">
    <div class="comment-inner">TS</div>
</div>
<div class="comment-box" style="float: left; margin-right: 2px; margin-bottom: 2px; ">
    <div class="comment-inner">VZ</div>
</div>
<div class="comment-box" style="float: left; margin-right: 2px; margin-bottom: 2px; ">
    <div class="comment-inner">CZ</div>
</div>
<div class="comment-box" style="float: left; margin-right: 2px; margin-bottom: 2px; ">
    <div class="comment-inner">ES</div>
</div>
<div class="comment-box" style="float: left; margin-right: 2px; margin-bottom: 2px; ">
    <div class="comment-inner">QI</div>
</div>
<div class="comment-box" style="float: left; margin-right: 2px; margin-bottom: 2px; ">
    <div...

CSS

.comment-box {
    position: relative;
    overflow: none;
    background: blue;
    color: white;
    text-align: center;
    display: table-cell;
    vertical-align: middle;
    padding: 1px;
    line-height: 20px;
}

JavaScript

var minsize = 20;

$('.comment-box').each(function () {
    $(this).css('font-size', '12');
    var curWi = $(this).width();
    var curHi = $(this).height();
    var ideal = 20;
    var size = 12;

    while (curWi > ideal || curHi > ideal) {
        size = size - 1;
        $(this).css('font-size', size);
        curWi = $(this).width();
        curHi = $(this).height();
    }

    if (size < minsize) {
        minsize = size;
    }

    $(this).css({
        height: ideal,
        width: ideal
    })
}).css('font-size', minsize);