How should I do to reduce paragraph font size based on a div fixed width

Question

I've did something till now and it works on block-b as you can see in my example below.

I want to make this elegant but I don't know how.

So my question is: how can I make my both blocks (a and b) work separately but to do the same thing based on my div width and height, to reduce font size.

Also I use a span to fit a paragraph in one line (like in my example)

The font must have the same size in both spans based on reduction on one of it.

;(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>

please refer to https://stackoverflow.com/questions/16056591/font-scaling-based-on-width-of-container — Miller Cy Chan, Oct 18 '18 at 08:02

score 0 · Accepted Answer · answered Oct 18 '18 at 14:12

I found the solution to this problem :)

If you want to make this, you have to use it like this:

(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>

How should I do to reduce paragraph font size based on a div fixed width

1 Answers1