Make lines of text have equal length

Question

In centered h1 elements, if the text falls on multiple lines, line breaks make the text look like this:

                This is a header that takes          


        

Answer 1

Late to this party, but here's my approach. I get the initial element height (any elements with the class balance_lines, in the code below), then incrementally shrink the width of the element. Once the height of the element changes, I've gone too far. The step before that should have lovely roughly-equal line lengths.

$('.balance_lines').each(function(){
    var currentHeight = $(this).height();
    var thisHeight = currentHeight;
    var currentWidth = $(this).width();
    var newWidth = currentWidth;
    // Try shrinking width until height changes
    while (thisHeight == currentHeight) {
        var testWidth = newWidth - 10;
        $(this).width(testWidth);
        thisHeight = $(this).height();
        if (thisHeight == currentHeight) {
            newWidth = testWidth;
        } else {
            break;
        }
    }
    $(this).width(newWidth);
});

You can see this code in action on the homepage at apollopad.com.

Answer 2

Late to this party, but here's my approach. I get the initial element height (any elements with the class balance_lines, in the code below), then incrementally shrink the width of the element. Once the height of the element changes, I've gone too far. The step before that should have lovely roughly-equal line lengths

Answer 3

I would solve it using only strict JavaScript, going this way:

1. put a class named 'truncate' to h1 tags you want to break
2. configure the javascript code on your needs knowing that