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

允我心安 提交于 2021-01-29 22:27:26

问题


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

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

            }

          });
        }

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

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!