table-layout:fixed与auto与表格内换行

来源:互联网 发布:找外国人聊天软件 编辑:程序博客网 时间:2024/05/14 11:54

   

       如果想要一个table固定大小,里面的文字强制换行(尤其是在一长串英文文本,并且中间无空格分隔的情况下),以达到使过长的文字不撑破表格的目的,一般是使用样式:table-layout:fixed。

      但是有的字被遮住了,还有的隐藏了,不符和我的要求,我要得是一段文章都显示在页面上,那怎么解决呢?

      首先看下 table-layout:fixed与auto与noWrap与表格内换行:table-layout : auto | fixed 参数:auto :  默认的自动算法。布局将基于各单元格的内容。表格在每一单元格读取计算之后才会显示出来。速度很慢!fixed :  固定布局的算法。在这算法中,水平布局是仅仅基于表格的宽度,表格边框的宽度,单元格间距,列的宽度。如果未设置TD宽度,则noWrap属性是起作用的。如果设置了TD宽度,则noWrap属性是不起作用的。 table { table-layout: auto; } 为了让表格布局固定住,我们需要table-layout:fixed。假设没有fixed,把你的分辨率减小到一定程度,你会发现white-space: nowrap是不会生效的。 技巧:为了使表格能够适应液态布局(liquid layout,即可伸缩性),不建议你为表格设置绝对宽度,使用相对宽度如百分比是不错的选择。另外,把宽度相对固定的内容(比如时间格式)格设置绝对宽度,非固定的内容格不设置任何宽度,只需给予其设置white-space: nowrap,虽然在小分辨率的情况下会溢出,但依据某些观点看来,这比折行更美观。

     其次 word-break:break-all; .(IE浏览器)连续的英文字符和阿拉伯数字,使用word-wrap : break-word ;或者word-break:break-all;实现强制断行。例如:

.                (IE浏览器)使用 table-layout:fixed;强制table的宽度,内层td,th采用word-break : break-all;或者word-wrap : break-word ;换行

<table width="200" style="table-layout:fixed;">
<tr>
<td width="25%" style="word-break : break-all; ">dasfasdfasfasfd asdfasdfadsdfasfd
</td>
<td style="word-wrap : break-word ;">阿克苏打发说得来扩大 1212暗暗
</td>
</tr>
</table>

    效果:可以换行

     这样可以通过 table-layout:fixed;word-break:break-all; 实现表格内换行,只是针对IE浏览器。

     但是在Firefox下面,怎么解决呢?

     .(Firefox浏览器)使用 table-layout:fixed;强制table的宽度,内层td,th采用word-break : break-all;或者word-wrap : break-word ;换行,使用overflow:hidden;隐藏超出内容,这里overflow:auto;无法起作用

<table style="table-layout:fixed" width="200">
<tr>
<td width="25%" style="word-break : break-all; overflow:hidden; ">阿克苏打发说得来扩大 1212暗暗</td>
<td width="75%" style="word-wrap : break-word; overflow:hidden; ">阿克苏打发说得来扩大 1212暗暗</td>
</tr>
</table>

    效果:隐藏多于内容

  


 

原创粉丝点击