javascript - 我应该如何根据 div 固定宽度减小段落字体大小

Question

到目前为止，我已经做了一些事情，它适用于 block-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>

标签： javascriptjqueryhtmlcss

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>