Question

We have a DIV inside your web layout with a fixed width and height. Text is inserted automatically depending on some context inside the DIV and the text’s length fits usually that most of the box is vertically filled. Perhaps there is one or two empty lines at the bottom of the box. Business requirement: The text top and text bottom should be aligned with the upper and bottom margin of the box. Is there some way to stretch the text verticially (e.g. through adjusting the line-eight) either through CSS or Javascript automatically?

Answer 1

There’s always a way. 😉 You would be hard-pressed to do this with pure CSS, unless there’s a new property that I’m unaware of.

I would be tempted to do it with JavaScript, especially since the box dimensions don’t change. It’s really just a bunch of math. Here’s a sample that’s kind of just hacked together. I haven’t tried it in any other browsers, and your mileage may vary… but at least it’s a jumping off point. Link to fiddle (second box added as reference point): http://jsfiddle.net/j98Rh/

HTML:

<div id="box">
  <p>
  This is a bunch of text, blah blah blah, just a bunch of text. 
  I like to think about whether elves are really just angels who 
  gave up their old jobs to become toymakers because hey... toys!
  </p>
</div>

CSS:

#box { width: 300px; height: 120px; background-color: teal}
#box p { line-height: 18px; }

JavaScript using jQuery:

var $p = $('#box p');

var boxHeight = $('#box').height();
var lineHeight = parseInt($p.css('line-height'));
var pHeight = $p.height();
var numLines = parseInt(pHeight/lineHeight);

var newHeight = boxHeight/numLines;
$p.css('line-height', newHeight + 'px');