JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
    <title></title>
</head>
<body>
    <div class="block_5">Lorem ipsum dolor sit amet jet value spent</div>
</body>
</html>

CSS

div {
    width: 250px;
    border: 1px solid #999;
    margin: 10px;
    height: 50px;
    line-height: 50px;
    text-align: center;
    white-space: nowrap;
}
.block_5 {
    font-size: 43px;
}

JavaScript

var _self = $('div.block_5');
var height = _self.height();
var font_size = _self.css('font-size').replace('px', '');

var _fake = _self.clone();
_fake.css({
    'height': 'auto',
    'min-height': height+'px',
    'white-space': 'normal',
    'position': 'absolute',
    'top': '-2000px'
}).appendTo('body');

while(_fake.height() != height) {
    font_size--;
    _fake.css('font-size', font_size+'px');
}

_self.css('font-size', font_size+'px');
_fake.remove();