Jquery - вписывает текст в элемент с использованием только букв и пробелов

Question

Есть ли плагин для этого? Я просматривал internetz и нашел bigText, Justify, fitText, textFit, но все они, кажется, работают с размером шрифта, который я не хочу делать. Я только хочу, чтобы текст помещался внутри элемента с определенной шириной.

HTML:

<div id="title">
   <h1>One header that i pretty long</h1>
   <h2>Sub-header that is shorter</h2>
</div>

CSS:

#title {
   width: 300px;
}

h1 {
   font-size: 3em;
}

h2 {
   font-size: 2em;
}

Проблема с плагинами, которую я обнаружил до сих пор, заключается в том, что подзаголовок в конце будет больше, потому что в нем меньше букв.

Я нашел это решение, но проблема в том, что он дает мне немного несбалансированный интервал, оправдать

JS

if(config.fonts_loaded){
            $(".title .justify").each(function(i, e) {
            var $t    = $(this);
            console.log($t.height());
            var text  = $t.text();
            var tLen  = text.length -1;
            var i     = 0;
            var letter;
            var ratio;
            //  We have the data we need to rebuild text. Lose original text.
            //
            $t.empty();
            while(i <= tLen) {
              letter = $("<span></span>")
              .css({
                "position" : "absolute"
              })
              .text(text.charAt(i));
              $t.append(letter);
              ratio = i / tLen;
              //  Place each character in its rational slot, retreating margin

              //  so as to stay within bounds (last character starts at 100% of width).

              //

              letter.css({

                "left"      : (100 * ratio) + "%",

                "margin-left" : -letter.width() * ratio

              });

              ++i

            }

          });
        }

Результаты в:

Answer 1

Вместо этого я сам сделал сценарий и начал с букв, чтобы отделить каждую букву друг от друга, а затем выяснить, сколько места они заняли вместе.

Lettering.js

Это мой последний код,

function letter_space_me(element){
    var el = $(element).text();
    el = el.replace(/ /g, ' '); // REPLACE ALL WHITESPACES WITH  
    $(element).html(el);
    $(element).lettering();
    var characters = $(element + ' span');
    var number_of_chars = characters.length;
    var parent_width = $(element).parent().width()

    var total_width = 0;

    for (var i = 0; i < characters.length; i++) {
        total_width += $(characters[i]).width();
    };

    var spacing = (parent_width - total_width) / (number_of_chars - 1); // GET SPACING PER CHARACTERS EXCEPT FOR THE LAST CHARACTER WHICH WE DONT WANT TO GIVE AND SPACE TO.

    for (var i = 0; i < characters.length; i++) {
        if((characters.length - i) > 1){
            $(characters[i]).css({'padding-right' : spacing + 'px'});
        }
    };
}