css中强制换行word-break、word-wrap、white-space区别实例

《css中强制换行word-break、word-wrap、white-space区别实例》要点:
本文介绍了css中强制换行word-break、word-wrap、white-space区别实例,希望对您有用。如果有疑问,可以联系我们。

本文讲解css中强制换行word-break、word-wrap、white-space区别实例。文章来自网络,作者不详。

这段测试代码

<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>

样式1:

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

IE6的效果

css中强制换行word-break、word-wrap、white-space区别实例1


在firefox和ie8下的效果

css中强制换行word-break、word-wrap、white-space区别实例2


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



样式2:

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


效果2:长英文字符串在火狐下不能换行

css中强制换行word-break、word-wrap、white-space区别实例3

css中强制换行word-break、word-wrap、white-space区别实例4


样式3:

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

效果3:IE6下,英文长字符创和中文长句会撑开容器,IE7、IE8直接溢出,火狐下只有长英文字符串会溢出。

css中强制换行word-break、word-wrap、white-space区别实例5

css中强制换行word-break、word-wrap、white-space区别实例6

css中强制换行word-break、word-wrap、white-space区别实例7


样式4:和样式1一样。

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


样式5:所有浏览器都换行

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

css中强制换行word-break、word-wrap、white-space区别实例8

样式6:同样式1

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


样式7: IE6下全部撑开,IE7、IE8、Firefox下全部溢出  

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

css中强制换行word-break、word-wrap、white-space区别实例9

css中强制换行word-break、word-wrap、white-space区别实例10



样式8:和样式7相同:

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

相关文章

前言 最近项目做完,用户需要兼容IE,于是开展了兼容性的调整工作。边调整边想感叹IE真是个沙雕。。特将...
前言 有些属性不是很常用,但是工作中遇到了,记录一下,方便学习。 1、text-indent text-indent 属性规...
前言 政府网站会遇到公祭日的时候,网站整体颜色变灰的情况。今天正好调了一下。在此把解决方案分享给大...
需求 项目里有个消息中心,当有消息的时候,小铃铛图标可以晃两下,提示当前有信息。 实现过程 书写css...
html代码 css代码 效果图
在一些界面上 , 如果每个icon都去找图片还是相当麻烦的 , 直接使用css画出icon就方便的多了 , 下面两个...