您的位置:首页 > Web前端 > HTML

html表格内容自动换行,强制换行

2014-05-06 19:22 363 查看
首先介绍两个利器:

table-layout:fixed //固定表格大小

word-break:break-all;//字符串自动换行

注意:IE和firefox是有很大区别的!(我就是栽在这个上面了,⊙﹏⊙b汗)

1. (IE浏览器)使用 table-layout:fixed;强制table的宽度,多余内容隐藏

<table style="table-layout:fixed" width="200">

2.(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; ">abcdefghigklmnopqrstuvwxyz 1234567890

3.(Firefox浏览器)连续的英文字符和阿拉伯数字的断行,Firefox的所有版本的没有解决这个问题,我们只有让超出边界的字符隐藏或者,给容器添加滚动条

4.(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; ">abcdefghigklmnopqrstuvwxyz1234567890</td>
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: