目的很简单,就是让表格保持固定大小,单元格的长、宽都固定,不被单元格内的文字溢出改变布局
Step.1
固定表格,这里用到了RP的table-layout的fix属性
手册里是这样的:
引用:
简单说,就是将表格的单元格布局钉死。
Step.2
理论上,接下来只需要在td上加上overflow:hidden,让溢出的文字不显示就万事大吉了,但事实上远没有那么简单,table-layout有个很RP的问题,如果表格内的文字出现空格、中文字符等时,会自动进行换行,这样一来宽度是有保证了,高度仍然会溢出。
这里首先考虑用nowrap,目的是使单元格强制不换行。但事实上nowrap也是个很RP的属性,它只有在单元格未指定宽度的情况下才是有用的。我们的目的是固定单元格的长宽,显然单在td后面加上nowrap也是行不通的。
Step.3
那么就只能把很简单的事情搞到如此复杂了……
HTML 代码:
<table width="100" style="table-layout:fixed;">
<tr>
<td width="100" style="overflow:hidden;text-overflow:ellipsis; white-space:nowrap;"><div nowrap>这里是一个测试,再多的汉字和空格也不怕</div></td>
</tr>
</table>
text-overflow是一个很好css,可以把溢出的文字用...截断并提示。事实上我想说的是,布局的时候尽可能用div吧,这种RP的问题用div的话一句话就完了。。。
Step.1
固定表格,这里用到了RP的table-layout的fix属性
手册里是这样的:
引用:
|
简单说,就是将表格的单元格布局钉死。
Step.2
理论上,接下来只需要在td上加上overflow:hidden,让溢出的文字不显示就万事大吉了,但事实上远没有那么简单,table-layout有个很RP的问题,如果表格内的文字出现空格、中文字符等时,会自动进行换行,这样一来宽度是有保证了,高度仍然会溢出。
这里首先考虑用nowrap,目的是使单元格强制不换行。但事实上nowrap也是个很RP的属性,它只有在单元格未指定宽度的情况下才是有用的。我们的目的是固定单元格的长宽,显然单在td后面加上nowrap也是行不通的。
Step.3
那么就只能把很简单的事情搞到如此复杂了……
HTML 代码:
<table width="100" style="table-layout:fixed;">
<tr>
<td width="100" style="overflow:hidden;text-overflow:ellipsis; white-space:nowrap;"><div nowrap>这里是一个测试,再多的汉字和空格也不怕</div></td>
</tr>
</table>
text-overflow是一个很好css,可以把溢出的文字用...截断并提示。事实上我想说的是,布局的时候尽可能用div吧,这种RP的问题用div的话一句话就完了。。。