示例代码: <meta charset="utf-8" /> <style> .txt{ overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } </style> <p class="txt">溢出文字隐藏溢出文字隐藏溢出文字隐藏溢出文字隐藏</p> 这串css能解决文字溢出后,在浏览器端显示... 其中不同浏览器兼容性问题, 确切的说, 是不同浏览器对CSS标准执行的问题. 首先你应该知道不仅仅是Opera显示不正常, Firefox也不能. 由于Firefox是公认的标准浏览器[当然, Opera也是], 且市场份额更高, 因此拿Firefox来作认证.
[举例]
1. Firefox不支持ellipsis (…)属性,即很长的一段字符串会显示省略号. text-overflow: ellipsis;
这个在空间日志编辑页面的日志选项里就有应用, 你如果输入很长的类别名, 回来编辑该日志会发现原来的类别名在IE中会显示前面部分, 后面直接用省略号代替, 而在Firefox等浏览器下会显示很长直到撑破界面框架.
这个在空间日志编辑页面的日志选项里就有应用, 你如果输入很长的类别名, 回来编辑该日志会发现原来的类别名在IE中会显示前面部分, 后面直接用省略号代替, 而在Firefox等浏览器下会显示很长直到撑破界面框架.
2. 在Firefox中, style="overflow:hidden"仅仅工作于<div>而不是<span>或者<td>等等
3. 在固定链接部分, IE浏览器能够应用word-wrap属性对超出宽度的字串进行换行, 具体的就是固定链接的地址长度一旦超出300px就自动折行了. .bvwordwrap{word-wrap:break-word;width:300px;left:0}
而在Firefox等浏览器中, word-wrap这个属性是不被识别的, 因为该CSS属性不符合W3的标准, 应该用white-space:normal;来代替, 这样在FireFox和IE下就都能正确换行. 而且要注意, 单词间的空格不能用 来代替, 不然不能正确换行.
Comments | NOTHING