自動換行改變小區大小

我有一個表2列，其中之一具有word-wrap: break-word：自動換行改變小區大小

table { 
 
    table-layout: fixed; 
 
    width: 100%; 
 
    border: 1px dotted gray; 
 
} 
 

 
table td { 
 
    border: 1px solid blue; 
 
} 
 

 
table td:nth-child(2) { 
 
    word-wrap: break-word; 
 
}

<table> 
 
    <tr> 
 
     <td>Column1</td> 
 
     <td>Column2Column2Column2Column2Column2Column2Column2Column2Column2Column2Column2Column2Column2Column2Column2Column2Column2Column2Column2Column2Column2Column2</td> 
 
    </tr> 
 
</table>

我想在第一列的寬度保持爲最小，第二列擴大到適合桌子的其餘部分。

但word-wrap: break-word只適用於我設置table-layout: fixed並強制所有列具有相同尺寸。如何在不明確設置第一列的寬度值的情況下實現我想要的效果？

來源

2015-08-08 Atlas23250

我沒有這個CSS解決方案。只是一個Jquery技巧，基於此：http://stackoverflow.com/questions/2057682/determine-pixel-length-of-string-in-javascript-jquery它是這樣的：http://jsfiddle.net/xgk455xr/基本上，你必須設置寬度，但它是這樣設置的動態... – sinisake

您可以使用下面的<td>的width屬性來實現該功能。

table { 
 
    table-layout: fixed; 
 
    border: 1px dotted gray; 
 
} 
 
table td { 
 
    border: 1px solid blue; 
 
} 
 
table td:nth-child(2) { 
 
    word-wrap: break-word; 
 
    width: 100%; 
 
    max-width: 1px; 
 
}

<table> 
 
    <tr> 
 
    <td>Column1</td> 
 
    <td>Column2Column2Column2Column2Column2Column2Column2Column2Column2Column2Column2Column2Column2Column2Column2Column2Column2Column2Column2Column2Column2Column2</td> 
 
    </tr> 
 
</table>

來源

2015-08-08 15:01:18 chayasan

謝謝，但正如我在我的問題中所說，我不想在任何一列設置寬度，因爲我不知道多少內容將會有。 – Atlas23250

哎呀，我錯過了最後一句對不起。那麼，你想讓第一列適合它包含的最長的單詞嗎？ – chayasan

沒錯，就是這樣。 – Atlas23250

只需添加CSS的單個位，代碼下顯示，試試吧

table td { 
border: 1px solid blue; 
} 

table td:nth-child(1) { 
width:100px; //your value 
} 

table td:nth-child(2) { 
word-wrap: break-word; 
}

希望這將足夠讓你

Regds ..

來源

2015-08-08 15:06:07 Vijay

請急於閱讀問題之前趕緊回答。 – Atlas23250

自動換行改變小區大小

回答

相關問題