Jquery - Fit text into element with only letterspacing & word-spacing

问题

Is there a plugin for this? I have been screening of the internetz and found bigText, Justify, fitText, textFit but they all seem to work with the font-size which I dont want to do. I only want the text to fit inside a element with a defined width.

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

The problem with the plugins that I've found so far is that the sub-header will be bigger in the end because it has a shorter amount of letters.

I've found this solution but the problem is that it gives me a slightly unbalanced spacing, justify

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

            }

          });
        }

Results in: enter image description here

回答1:

Made a script myself instead and started with lettering to separate each letter from each other and then work out how much space they took together.

Lettering.js

This is my final code,

function letter_space_me(element){
    var el = $(element).text();
    el = el.replace(/ /g, '&nbsp;'); // REPLACE ALL WHITESPACES WITH &NBSP;
    $(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'});
        }
    };
}

来源：https://stackoverflow.com/questions/16015957/jquery-fit-text-into-element-with-only-letterspacing-word-spacing

标签

jquery

font-size

justify

letter-spacing

word-spacing