如何在寬度爲100％的段落中顯示一行文本，這是表格單元格的一部分？

我有一個例子：如何在寬度爲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％的細胞。如何解決這個問題呢？

來源

2012-11-06 podeig

你應該申請table-layout:fixed：

table { 
    table-layout:fixed; 
}

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

來源

2012-11-06 13:17:16 keaukraine

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

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

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

來源

2012-11-06 13:19:52 kjana83

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

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

來源

2012-11-06 15:45:50 surendra

如何在寬度爲100％的段落中顯示一行文本，這是表格單元格的一部分？

回答

相關問題