当前位置: 维易PHP培训学院 > CSS体育比分365安全吗_365体育首页_365体育软件 > 内容正文

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

全是中文的情况。全是中文的情况。全是中文的情况。
中英文混排的情况。Chinese?and?English.?中英文混排的情况。Chinese?and?English.

样式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;}

转载请注明本页网址:
http://www.vephp.com/jiaocheng/144.html


????标签:css ?



相关体育比分365安全吗_365体育首页_365体育软件


同类体育比分365安全吗_365体育首页_365体育软件排行


特辑体育比分365安全吗_365体育首页_365体育软件



?