自动换行改变小区大小

我有一个表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

自动换行改变小区大小

回答

相关问题