2011-12-03 32 views
0

我有一個表格數據可能隨時間變化。這是填充用戶評論。評論將被存儲在數據庫中並顯示在html表中以供參考。用戶評論可能會在某些時候過多,在這種情況下,我的html表格的高度和寬度也會增加以顯示所有數據。但我想給在表標籤的固定的高度和寬度和僅示出的,這將被從數據庫中拍攝的用戶評論半..如何將表中的表數據(​​)中的內容限制到某個限制?

例如

<table> 
<th>id</th> 
<th>Comments</th> 
<th>User details</th> 
<tr> 
<td>1</td> 

<td>Lorem ipsum dolor sit amet consectetuer adipiscing elit Suspendisse eget est ac enim posuere adipiscing Nunc sollicitudin elit sed facilisis fringilla lectus mauris eleifend tortor eu auctor nulla odio in odio Cras sed orci Vestibulum ante ipsum primis in faucibus</td> 


<td>John smith</td> 
</tr> 
</table> 

在上述表評論專欄將由於它的文本而被擴展。我想要顯示只有一行或兩行

我該怎麼做與CSS?

回答

1

您應該添加包裝做到這一點:

<td> 
    <div class="cont">Lorem ipsum dolor sit amet consectetuer adipiscing elit 
     Suspendisse eget est ac enim posuere adipiscing Nunc sollicitudin elit 
     sed facilisis fringilla lectus mauris eleifend tortor eu auctor nulla 
     odio in odio Cras sed orci Vestibulum ante ipsum primis in faucibus 
    </div> 
</td> 

和CSS:

.cont { 
    overflow: hidden; 
    width: 300px; /* or other */ 
    -o-text-overflow: ellipsis; /* Opera */ 
     text-overflow: ellipsis; 
    white-space: nowrap; 
} 
0

使用CSS將內容分配爲overflow: hidden以及max-widthmax-height。這應該夠了吧。

0

<td style="width: 300px;">Lorem ipsum dolor sit amet consectetuer adipiscing elit Suspendisse eget est ac enim posuere adipiscing Nunc sollicitudin elit sed facilisis fringilla lectus mauris eleifend tortor eu auctor nulla odio in odio Cras sed orci Vestibulum ante ipsum primis in faucibus</td> 

300像素可以是你的choise ..

0

更好另一種可能是截斷通信在它加載到服務器端的頁面之前。然後,您可以附加一個elipsis來顯示它被截斷並鏈接到完整評論 - 這比僅僅隱藏一些文本更方便用戶使用。