Сделать текст шириной с родительский элемент динамического размера

145

27 января 2022, 02:20

У меня есть элемент динамического размера (inline). В нём есть несколько элементов, одним из которых является текст. Как сделать так, чтобы ширина текста была шириной inline-элемента и не вызывала расширения?

EDIT: Я немного переосмыслил структуру и реализовал родительский блок как flex. Может быть, это поможет?

Answer 1

Если я правильно понял вопрос, то вот как вариант
Чтобы увидеть результат, раскрывайте на всю страницу, уменьшая и увеличивая ее по ширине

(function($) { 
  $.fn.fitText = function(kompressor, options) { 
    var compressor = kompressor || 1, 
      settings = $.extend({ 
        'minFontSize': Number.NEGATIVE_INFINITY, 
        'maxFontSize': Number.POSITIVE_INFINITY 
      }, options); 
    return this.each(function() { 
      var $this = $(this); 
      var resizer = function() { 
        $this.css('font-size', Math.max(Math.min($this.width() / (compressor * 100), parseFloat(settings.maxFontSize)), parseFloat(settings.minFontSize))); 
      }; 
      resizer(); 
      $(window).on('resize.fittext orientationchange.fittext', resizer); 
    }); 
  }; 
})(jQuery); 
 
$(document).ready(function() { 
  $("#title").fitText(1.1, { 
    minFontSize: '1%', 
    maxFontSize: '300%' 
  }); 
});

h2 { 
  font-size: 300%; 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
<section id="intro" class="full-height"> 
  <div class="content vertical-center"> 
    <div class="title" id="title"> 
      <h2>Текст шириной с родительский элемент динамического размера</h2> 
    </div> 
  </div> 
</section>