关于Css折行的总结

关于Css折行的总结

首先我们来说说默认,其实默认就是会有一个white-space:nomal自动换行,但是在一些比较特殊的情况比如全中文,全英文的情况下,或者涉及到IE系的兼容,就可能要特殊处理。

关于兼容我觉得http://www.jb51.net/css/42578.html 篇文章就写的很详细。

<div  class="c1">safjaskflasjfklsajfklasjflksajflksjflkasfdsafdsfksafj</div>
<div class=c1>This is all English. This is all English. This is all English.</div>
<div class=c1>全是中文的情况。全是中文的情况。全是中文的情况。</div>
<div class=c1>中英文混排的情况。Chinese and English. 中英文混排的情况。Chinese and English.</div>

第一种:

.c1{ width:300px;word-break:normal;border:1px solid red;}

下面是各个浏览器的表现结果

这里写图片描述
这里写图片描述

如果内容是长英文字符串的话,IE6会把容器撑开,其他浏览器只会溢出,不会撑开

第二种

.c1{ width:300px;white-space:normal;border:1px solid red;}

这个同以上情况

第三种

.c1{ width:300px;word-wrap:normal;border:1px solid red;}

这个同以上情况

第四种
.c1{ width:300px;word-break:break-all;border:1px solid red;}
这里写图片描述
这里写图片描述
长英文字符串在火狐下不能换行

第五种

.c1{ width:300px;word-break:keep-all;border:1px solid red;}

这里写图片描述
这里写图片描述
IE6下,英文长字符创和中文长句会撑开容器,IE7、IE8直接溢出,火狐下只有长英文字符串会溢出。

第六种

.c1{ width:300px;word-wrap:break-word;border:1px solid red;}

这里写图片描述
所有浏览器都换行了

第七种

.c1{ width:300px;white-space:pre;border:1px solid red;}

这里写图片描述
这里写图片描述
IE6下全部撑开,IE7、IE8、Firefox下全部溢出
第八种

.c1{ width:300px;white-space:nowrap;border:1px solid red;}

同第七种

  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值