JSFiddle - React, Tailwind, and code Playground

by webviper

HTML

<div class="post js-adaptiveContent" data-minfont="13">
    Начну с того, что с каждым новым днем волна мобильных устройств все более накрывает людей. И, как повелось, практически все новейшие устройства обладают сенсорным экраном. Да что уж говорить, сейчас просматривать любимую соц. сеть можно даже с некоторых холодильников. Доминирование настольных компьютеров — сейчас это как рассказы о динозаврах — такое мы уже вряд ли увидим. Да что уж говорить, сейчас просматривать любимую соц. сеть можно даже с некоторых холодильников. Доминирование настольных компьютеров — сейчас это как рассказы о динозаврах — такое мы уже вряд ли увидим
</div>

<div class="post js-adaptiveContent" data-minfont="11">
    Начну с того, что с каждым новым днем волна мобильных устройств все более накрывает людей. И, как повелось, практически все новейшие устройства обладают сенсорным экраном. Да что уж говорить, сейчас просматривать любимую соц. сеть можно даже с некоторых холодильников. Доминирование настольных компьютеров — сейчас это как рассказы о динозаврах — такое мы уже вряд ли увидим. Да что уж говорить, сейчас просматривать любимую соц. сеть можно даже с некоторых холодильников. Доминирование настольных компьютеров — сейчас это как рассказы о динозаврах — такое мы уже вряд ли увидим
</div>

CSS

.post {
    width: 200px;
    height: 200px;
    float: left;
    margin: 10px;
    padding: 10px;
    border: 1px solid #000;
}

JavaScript

$(function(){
    $(function adaptiveContent(){
        $('.js-adaptiveContent').each(function(){
            var $this = $(this);
            $this.wrapInner('<div class="js-adaptiveContent-overlay"></div>');
            
            var $this_content = $this.children();
            var min_font = $this.data('minfont') || 12;  // Default font size == 12
            console.log($this.data('minfont'));
            var font_size = parseInt($this_content.css('font-size'));
            var height_container = $this.height();
            var height_content = $this_content.height();
            var str = $this_content.text();
            
            while (height_container <= height_content) {
                if (font_size <= min_font) {
                    if (height_container <= height_content) {
                        while (height_container <= height_content) {
                            str = $this_content.text();
                            $this_content.text(str.substring(0, str.length - 1));
                            height_content = $this_content.height();                    
                        }
                        $this_content.text(str.substring(0, str.length - 4) +'...');
                    }
                    break;
                } else {
                    $this_content.css('font-size', font_size - 1 + 'px');  
                    height_content = $this_content.height();
                    --font_size;
                }
            }
            
        });
    });
    
});