javascript - CSS または Javascript を使用した DIV 内のテキストの垂直方向のストレッチ

Question

Web レイアウト内に幅と高さが固定された DIV があります。テキストは、DIV 内のコンテキストに応じて自動的に挿入され、テキストの長さは通常、ボックスのほとんどが垂直方向に満たされるように収まります。おそらく、ボックスの下部に 1 つまたは 2 つの空の行があります。ビジネス要件: テキストの上部と下部は、ボックスの上部と下部の余白に揃える必要があります。CSS または Javascript を使用して、テキストを垂直方向に (たとえば、8 行目を調整することによって)自動的に引き伸ばす方法はありますか?

Answer 1

方法は常にあります。;-) 私が知らない新しいプロパティがない限り、純粋な CSS でこれを行うのは難しいでしょう。

特にボックスの寸法が変わらないので、JavaScript を使用したくなるでしょう。それは本当にただの数学の集まりです。これは、一緒にハッキングされたようなサンプルです。私は他のブラウザで試したことがなく、マイレージは異なるかもしれません...しかし、少なくともそれは出発点です. フィドルへのリンク (参照ポイントとして追加された 2 番目のボックス): 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; }

jQuery を使用した JavaScript:

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