使用CSS或Javascript在文本中垂直伸展文本DIV使用CSS或Javascript

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; } 

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