jQuery resizable, make the font smaller if it is wrapped

Question

I have a <div> that I can resize and I have font-sie that becomes smaller only if I resize the window. How can I make the font-size smaller on <div> resize? I want to have it on the same line.

Here I have my code:

$('.resize').resizable({minWidth: 110,
    minHeight: 120});

.resize{
    font-size: 2.8vh;
    white-space: nowrap;
    color: black;
    background:yellow;
    cursor:move;
    width:130px;
    height:130px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/themes/smoothness/jquery-ui.css">

<div class="resize">Some name that is very long</div>

P.S. use the full page to see the problem

Kavian K. · Accepted Answer · 2018-05-09T07:40:19.740

This Resizable Widget has an events named resize. You could listen for this event and achieve what you want.

Example:

$('.resize').resizable( {
minWidth: 110,
minHeight: 120,
resize: function( event, ui ) {
  // handle fontsize here
  var size = ui.size;
  // something like this change the values according to your requirements
  $( this ).css( 'font-size', ( size.width * size.height ) / 2800 + 'px' ); 
 }
} );

.resize{
 font-size: 2.8vh;
 white-space: nowrap;
 color: black;
 background: yellow;
 cursor: move;
 width: 130px;
 height: 130px
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/themes/smoothness/jquery-ui.css">
<div class="resize">Some name that is very long</div>

Note that this logic doesn't work for narrow, tall elements. The '2800' is also a rather arbitrary figure which again makes the logic very brittle. — Rory McCrossan, May 09 '18 at 07:45
Thank you @Rory McCrossan. You are right. I wrote this values just for example. — Kavian K., May 09 '18 at 08:20

score 1 · Answer 2 · answered May 09 '18 at 06:58

To achieve this you can use the textFill() plugin created by GeekyMonkey in this answer, and apply it to the div under the resize event. The only change you need to make to the HTML is to wrap the text in a span element. Try this:

;(function($) {
  $.fn.textfill = function(options) {
    var fontSize = options.maxFontPixels;
    var ourText = $('span:visible:first', 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;
  }
})(jQuery);

let textFillOpts = { maxFontPixels: 36 };

$('.resize').resizable({
  minWidth: 110,
  minHeight: 120,
  resize: function(e, ui) {
    console.log(ui.element);
    $(ui.element).textfill(textFillOpts);
  }
}).textfill(textFillOpts);;

.resize {
  font-size: 2.8vh;
  white-space: nowrap;
  color: black;
  background: yellow;
  cursor: move;
  width: 130px;
  height: 130px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/themes/smoothness/jquery-ui.css">

<div class="resize"><span>Some name that is very long</span></div>

thx for help but i want to write own code without extern library, do you have another idea? — Cananau Cristian, May 09 '18 at 07:08
because i use 2 external library, i want the this one to be a own code. If you have any another ideas how to do it. I will vote your answer because of your work. But i want something else. — Cananau Cristian, May 09 '18 at 07:21
Your reasoning makes no sense. If you want it to be 'your own code' why are you asking someone to give you code on SO? If you want to write this yourself, just copy it character by character in to your own file. — Rory McCrossan, May 09 '18 at 07:22
1. You're already using 2 external libraries. 2. External libraries are the whole point of using jQuery (ie. aiding reusability) 3. It's 15 lines of code, not a library. — Rory McCrossan, May 09 '18 at 07:24

jQuery resizable, make the font smaller if it is wrapped

2 Answers2