JSFiddle - React, Tailwind, and code Playground

by manish jesani

HTML

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<div class="td">
<div class="title main-color">test text</div>
</div>

<div class="td">
<div class="title main-color">test text is bigger now and goes outside of div and dont appears</div>
</div>

CSS

.main-color {
    opacity: 0.6;
    background: #ffffff;
}

.title {
    height: 100%;
    width: 470px;
    border-radius: 20px;
    float: left;
    text-align: center;
    line-height: 100px;
    font-size: 26px;
    overflow: hidden;
}

.td {
    margin: 60px 0;
    height: 100px;
    width: 100%;
}

JavaScript

$(function($){
    $(".title.main-color").each(function () {
        var numChars = $(this).text().length;     
        if ((numChars >= 1) && (numChars < 20)) {
            $(this).css("font-size", "2.2em");
        }
        else if ((numChars >= 20) && (numChars < 60)) {
            $(this).css("font-size", "1.8em");
        }
        else if ((numChars >= 60) && (numChars < 100)) {
            $(this).css("font-size", "1em");
        }
        else if ((numChars >= 100) && (numChars < 140)) {
            $(this).css("font-size", "0.9em");
        }
        else {
            $(this).css("font-size", "0.8em");
        }           
    });
});