Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>I use <a href="http://www.vissit.com/ajustar-el-tamano-de-texto-segun-su-contenedor" rel="nofollow">this plugin</a> that I made based on fitText.js, because fitText doesn't fit my needs, due to I don't know the length of the strings to resize, so the fix resize parameter of fitText don't work in all cases.</p> <pre><code>$.fn.adjustTextSize = function (set_max_size, min_size) { min_size = min_size || 12; // if no value then set a default one var string, width, line, initFontSize, returnFontSize, ratio; return this.each(function() { // Store the object var $this = $(this); var resizer = function () { string = $this; string.html('&lt;span style="white-space: nowrap;"&gt;' + string.html() + '&lt;/span&gt;'); width = string.width(); line = $(string.children('span')); initFontSize = parseInt(string.css('font-size')); ratio = width/line.width(); returnFontSize = initFontSize*ratio; if (set_max_size &amp;&amp; returnFontSize &gt; initFontSize) { returnFontSize = initFontSize; } if (min_size &amp;&amp; returnFontSize &lt; min_size) { returnFontSize = min_size; } string.css('font-size',returnFontSize); while (line.width() &gt;= width) { if (min_size &amp;&amp; returnFontSize &lt;= min_size) { string.html(line.html()); return false; } string.css('font-size', --returnFontSize); } string.html(line.html()); } // Call once to set. resizer(); // Call on resize. Opera debounces their resize by default. $(window).on('resize orientationchange', resizer); }); }; $('.js-adjust-text').adjustTextSize(false, 12); $('.js-adjust-text-limit').adjustTextSize(true, 30); </code></pre> <p>This plugin get two parameters:</p> <ul> <li>set_max_size: boolean to limit maximum font size to its defined size in CSS</li> <li>min_size: Integer number to limit minimum font size.</li> </ul> <p>I hope it works for your case.</p>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload