css形狀內的隨機文本

Question

我需要在css形狀內放置一些文本。我已經完成了這個形狀。現在我的問題是，如何根據文本內容的高度來調整形狀的高度？現在內容比形狀更長。

下面是代碼：http://jsfiddle.net/uE6x4/

<div class="trapezoid"> 
    A hella lot of lorem ipsum text goes here to test the freakin' trapezoid! 
</div> 

.trapezoid { 
    height: 0; 
    width: 80px; 
    border-bottom: 80px solid blue; 
    border-left: 40px solid transparent; 
} 

Answer 1

不要最初設置的DIV的高度爲0，這樣就可以判斷的div客戶高度，並分配給邊框寬度。而然後將高度設置爲0：

.trapezoid { 
    width: 80px; 
    border-bottom: 80px solid blue; 
    border-left: 40px solid transparent; 
} 

document.getElementById('xMyDiv').style.borderBottomWidth = document.getElementById('xMyDiv').clientHeight + 'px'; 
document.getElementById('xMyDiv').style.height = '0px'; 

這裏是工作提琴：http://jsfiddle.net/uE6x4/4/