JSFiddle - React, Tailwind, and code Playground

by wwwroot

HTML

<button class="dep_buttons">Button</button>
<br /><br />
<button class="dep_buttons">Lorem ipsum dolor sit amet orci aliquam</button>
<br /><br />
<button class="dep_buttons">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus erat libero, mattis vel purus nec, sagittis iaculis risus. Mauris varius mi condimentum massa faucibus interdum. Maecenas sit amet nisi felis. Suspendisse gravida ornare nunc, eget commodo arcu auctor at. Sed convallis diam non suscipit gravida. Nullam porta, est sit amet porttitor consectetur, felis urna tempor tellus, nec bibendum massa quam et sem. Phasellus ut egestas odio, vitae dictum turpis. Etiam massa lacus, cursus non fringilla sit amet, mollis euismod metus. Nam ac tincidunt dolor. Nulla sodales ante sit amet scelerisque suscipit.</button>

JavaScript

$('.dep_buttons').mouseover(function () {
    if ($(this).text().length > 30) {
        // Do you want to add a line break after every 30 character?
        $(this).html($(this).text().match(/.{1,30}/g).join("<br />"));
        $(this).stop().animate({
            height: "150px"
        }, 150);
    }
    $(".dep_buttons").mouseout(function () {
        $(this).stop().animate({
            height: "40px"
        }, 150);
    });
});