Jquery - Ajuste le texte dans l'élément avec seulement l'espacement des lettres et l'espacement des mots

Question

Y at-il un plugin pour cela? J'ai filtré internetz et trouvé bigText, Justify, fitText, textFit mais ils semblent tous fonctionner avec la taille de police que je ne veux pas faire. Je veux seulement que le texte rentre dans un élément avec une largeur définie.

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

Le problème avec les plug-ins que je l'ai trouvé à ce jour est que le sous-en-tête sera plus à la fin parce qu'il a une quantité plus courte de lettres.

J'ai trouvé cette solution, mais le problème est que cela me donne un espacement légèrement déséquilibré, 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 

      } 

      }); 
     } 

Résultats dans:

Answer 1

Fait un script moi-même à la place et a commencé par le lettrage pour séparer chaque lettre les uns des autres et ensuite déterminer combien d'espace ils ont pris ensemble.

Lettering.js

Ceci est mon code final,

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