如何基于div固定宽度减小段落字体大小

Question

到目前为止，我已经做了一些工作，并且可以在b块上工作，如下面的示例所示。

我想让它变得优雅，但我不知道如何。

所以我的问题是：如何使两个块（a和b）分别工作，但要根据div的宽度和高度执行相同的操作，以减小字体大小。

另外，我使用跨度使段落适合一行（例如在我的示例中）

字体在两个跨度中必须具有相同的大小，这要基于其中一种的缩小。

 ;(function($) { $.fn.textfill = function(options) { var fontSize = options.maxFontPixels; var ourText = $('span', this); var maxHeight = $(this).height(); var maxWidth = $(this).width(); var textHeight; var textWidth; do { ourText.css('font-size', fontSize); textHeight = ourText.height(); textWidth = ourText.width(); fontSize = fontSize - 1; } while ((textHeight > maxHeight || textWidth > maxWidth) && fontSize > 3); return this; } $.fn.textfill2 = function(options) { var fontSize = options.maxFontPixels; var ourText1 = $($('span', this)[0]); console.log(ourText1); var ourText2 = $($('span', this)[1]); console.log(ourText2); var maxHeight = $(this).height(); var maxWidth = $(this).width() + 5; var textHeight; var textWidth; var width1; var width2; do { ourText1.css('font-size', fontSize); ourText2.css('font-size', fontSize); textHeight = ourText1.height() + ourText2.height(); width1 = ourText1.width(); width2 = ourText2.width(); textWidth = Math.max(width1, width2); fontSize = fontSize - 1; } while ((textHeight > maxHeight || textWidth > maxWidth) && fontSize > 3); // ourText1.css('font-size', 140); return this; } })(jQuery); $(document).ready(function() { $('#blocka').textfill({ maxFontPixels: 140 }); $('#blockb').textfill2({ maxFontPixels: 140 }); }); 

 .wrapper { /* don't touch */ position: relative; width: 100%; height: 100%; } .blocks { /* here is the maximum width of the container. if you change the width of a and b and they have together more than 3000px, you have to change it from here too */ width: 3000px; /* don't touch */ display: flex; justify-content: space-between; align-items: center; /* if you change the max height of the boxes a and b below. you have to put here the same value from there */ height: 1000px; /* dont touch */ margin: 0 auto; background-color: #ff0; } .block-a, .block-b { /* here is the width of the block a and block b. they are linked together */ width: 800px; /* here is the padding of the blocks a and b linked together */ padding: 100px; /* Here is the align of the text from box a and b. values available: left, center, right */ text-align: center; /* from here you can change the max height of the boxes a and b */ max-height: 1000px; /* don't touch */ overflow: hidden; background-color: #ddd; display: flex; align-items: center; justify-content: center; flex-direction: column; } .blocks span { display: block; font-size:80px; /* if you want to put some font family, you can do it from here. In this case, we use Arial with fallbacks Verdana and sans-serif */ font-family: Arial, Verdana, sans-serif; /* don't touch */ line-height: 1; color: #000000; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/FitText.js/1.2.0/jquery.fittext.min.js"></script> <div class="wrapper"> <div class="blocks"> <div class="block-a" id="blocka" style="width: 800px; height: 800px;"> <span style="white-space: nowrap;">!Test Test Test!!!!</span> <span>Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test</span> </div> <div class="block-b" id="blockb" style="width: 800px; height: 800px;"> <span style="white-space: nowrap;">!Test Test Test!!!!</span> <span>Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Te st Test Test Test Test Test Test Test Test Test Test Test Test Test Test Te st Test</span> </div> </div> </div> 

Answer 1

我找到了解决这个问题的方法:)

如果要这样做，则必须像这样使用它：

 (function() { var elements = $('.resize'); if(elements.length < 0) { return; } elements.each(function(i, element) { while(element.scrollWidth > element.offsetWidth || element.scrollHeight > element.offsetHeight) { var newFontSize = (parseFloat($(element).css('font-size').slice(0, -2)) * 0.95) + 'px'; $(element).css('font-size', newFontSize); } }); })(); 

 .no-resize, .resize { width: 100px; height: 50px; border: 1px solid #000; color: #000; margin: 20px 0; font-size: 15px } .nowrap { width: 250px; white-space: nowrap; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class='container'> <div class='no-resize'>This text won't be resized and will go out of the div.</div> <div class='resize'>This text will be resized and wont go out of the div.</div> <div class='no-resize nowrap'>This text won't be resized and will go out of the div.</div> <div class='resize nowrap'>This text will also be resized and wont go out of the div.</div> </div>