表格單元格中最多可包含兩行文字

對不起，只是發佈一個沒有任何自我勞動證明的問題。表格單元格中最多可包含兩行文字

我想在表格中包裝單元格，但最多隻能包含2行。

Example

走向更寬闊的是還沒有一個選項。有什麼建議嗎？

來源

2013-08-02 morne

添加一些代碼或使http://www.fiddle.net –

表格單元格非常難以顯示您放入的所有內容。直到他們將寬度和高度屬性用作粗略指導的地步，而不是硬性限制。需要顯示更多？然後變得更大。

解決的辦法是將<div>放在您給出所需寬度和高度的表格單元格中，並且overflow:hidden。然後表格單元格不會增長，因爲它不需要，文本不會超出div的邊界。

來源

2013-08-02 09:19:08

IE9 +和所有其他主流瀏覽器也將理解並正確應用'這段文字太適合這個小細胞了，但是'white-space：nowrap'是必不可少的。 – UweB

然後，文本將不會跨越td的高度，因爲OP需要。你將只有文本行。 –

@UweB這是[my fiddle]（http://jsfiddle.net/MrLister/h4fqm/2/）。你可以做同樣的（截斷兩行後）沒有額外的'div'，只有'td'風格？ –

你得給

height

和

overflow:hidden

的表格單元格

來源

2013-08-02 09:17:25

你是否也希望通過增加省略號截斷？如果是這種情況，我建議trunk8。如果您不想要省略號，只需執行overflow: hidden並明確設置height屬性。

來源

2013-08-02 09:18:53 Vinay

這將工作

<div style="width:100px; padding:10px; height:50px; overflow:hidden;"> 
    Your text goes here .... Your text goes here .... Your text goes here .... 
</div>

感謝

來源

2013-08-02 09:19:36

請提供具體的寬度與table和td。

應用此css樣式表：

table-layout: fixed;

應用這些CSS樣式的td要適應：

overflow: hidden; 
white-space: nowrap;

如果你想顯示省略號：

text-overflow: ellipsis;

看到這個小提琴：http://jsfiddle.net/h4fqm/

來源

2013-08-02 09:20:05 Abhitalks

IE9 +將需要一個'max-width'或它不會工作;不能用舊版本進行測試（如果它們甚至是相關的）。 – UweB

@UweB在我的IE9上正常工作。你可能對IE10/11來說是對的。謝謝。 – Abhitalks

如果你想只是爲了顯示兩行，並隱藏休息，你需要指定顯示，行高，溢出和寬度與細胞height屬性，

.your_class { 
    line-height: 16px; 
    height: 32px; 
    width: 100px; /* This should be as per your requirement */ 
    overflow: hidden; 
    word-break: break-word; /* for breaking longer text */ 
    word-break: break-all; 
    display: block; 
}

您可以檢查工作在這裏http://jsfiddle.net/WLcC4/

來源

2013-08-02 10:02:54

你有工作嗎？ – Abhitalks

對不起，我忘了添加顯示屬性。它的工作現在。 –

表格單元格中最多可包含兩行文字

回答

相關問題