css 关于文字溢出，导致在手机端浏览网页超出范围的解决办法

发布于 2020-11-30  587 次阅读 

示例代码：

<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等浏览器下会显示很长直到撑破界面框架.
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下就都能正确换行. 而且要注意, 单词间的空格不能用&nbsp;来代替, 不然不能正确换行.

一沙一世界，一花一天堂。君掌盛无边，刹那成永恒。