jQuery-仅使用字母间距&将文本插入元素字间距 [英] Jquery - Fit text into element with only letterspacing & word-spacing

问题描述

是否有用于此的插件?我一直在筛选internetz，发现bigText，Justify，fitText，textFit，但是它们似乎都可以使用我不想做的字体大小.我只希望文本适合具有定义宽度的元素.

HTML:

 < div id ="title">< h1>我相当长的一个标头</h1>< h2>子标题短于/h2.</div> 

CSS:

  #title {宽度:300像素；}h1 {字号:3em；}h2 {字号:2em；} 

到目前为止，我发现的插件存在的问题是，子标题最终会更大，因为它的字母数量更短.

我找到了这个解决方案，但是问题是它给了我一个稍微不平衡的间距，

这是我的最终代码，

 函数letter_space_me(element){var el = $(element).text();el = el.replace(//g，'& nbsp;');//用& NBSP;替换所有空白$(element).html(el);$(element).lettering();var characters = $(element +'span');var number_of_chars = character.length;var parent_width = $(element).parent().width()var total_width = 0;for(var i = 0; i< character.length; i ++){total_width + = $(characters [i]).width();};var interval =(parent_width-total_width)/(number_of_chars-1);//获得每个字符的间距，但不包括我们不想给出和间隔的最后一个字符.for(var i = 0; i< character.length; i ++){if((characters.length-i)> 1){$(characters [i]).css({'padding-right':interval +'px'});}};} 

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:

解决方案

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, ' '); // 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'});
        }
    };
}

这篇关于jQuery-仅使用字母间距&将文本插入元素字间距的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！