javascript - 使用 CSS 或 Javascript 在 DIV 中垂直拉伸文本

Question

我们在您的网页布局中有一个固定宽度和高度的 DIV。文本会根据 DIV 内的某些上下文自动插入，并且文本的长度通常适合大部分框垂直填充。也许在框的底部有一两行空行。业务要求：文字顶部和文字底部要与框的上下边距对齐。有没有办法通过CSS或Javascript自动垂直拉伸文本（例如通过调整第八行）？

Answer 1

总有办法的。;-) 使用纯 CSS 很难做到这一点，除非有一个我不知道的新属性。

我很想用 JavaScript 来做，特别是因为盒子的尺寸没有改变。这真的只是一堆数学。这是一个刚刚拼凑在一起的样本。我没有在任何其他浏览器中尝试过，你的里程可能会有所不同......但至少这是一个起点。指向小提琴的链接（作为参考点添加的第二个框）：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');