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,