2012-11-06 88 views
1

我有一個例子:如何在寬度爲100%的段落中顯示一行文本,這是表格單元格的一部分?

<table class="border" style="width:100%"> 
<tr> 
    <td style="width:30%" class="border p10"> 
     Test 
    </td> 
    <td style="width:70%" class="border p10"> 
     <p class="longText"> 
     Looong text Looong text Looong text Looong text Looong text Looong text Looong text Looong text 
     </p> 
    </td> 
</tr> 

CSS:

.longText { 
    white-space:nowrap; 
    overflow:hidden; 
    text-overflow:ellipsis; 
    width:100% 
} 

.border {border: solid 1px #ccc} 
.p10 {padding: 10px} 

你可以在這裏嘗試http://jsfiddle.net/rnwCw/20/

的問題是,長文本破壞了細胞的寬度(30%和70%)。如果我將.longText的寬度設置爲PX,例如200px,那麼表格就可以。但我需要的是100%的細胞。如何解決這個問題呢?

回答

5

你應該申請table-layout:fixed

table { 
    table-layout:fixed; 
} 

請參閱小提琴這裏:http://jsfiddle.net/hARt5/這是你希望達到的效果?現在表格行具有30/70的比例。

+0

是的!你節省了我的時間!從來沒有用戶這個CSS屬性。謝謝! :-) – podeig

0

刪除white-space:nowrap; add word-wrap這有助於一字排開。

.longText { 
    overflow:hidden; 
    text-overflow:ellipsis;width:100%; 
    word-wrap:break-word; 
} 
+0

對不起,它不適合我。 – podeig

0

100%將根據您的顯示器採取整個瀏覽器的寬度。如上所述使用表格佈局:固定 或 使用px代替%來修復任何顯示器上的表格分辨率

相關問題