飞度网
转到手机版您现在的位置: 飞度网电脑/网络正文
扫码穿越到手机

[ 字号:    来源:互联网 2008-5-20 22:25:00 ]
word-wrap是控制换行的。
使用break-word时,是将强制换行。中文没有任何问题,英文语句也没问题。但是对于长串的英文,就不起作用。
word-break是控制是否断词的。
normal是默认情况,英文单词不被拆开。
break-all,是断开单词。在单词到边界时,下个字母自动到下一行。主要解决了长串英文的问题。
keep-all,是指Chinese, Japanese, and Korean不断词。即只用此时,不用word-wrap,中文就不会换行了。(英文语句正常。)
兼容 IE 和 FF 的换行 CSS 推荐样式
最好的方式是
word-wrap:break-word; overflow:hidden;
而不是
word-wrap:break-word; word-break:break-all;
也不是
word-wrap:break-word; overflow:auto;
在 IE 下没有任何问题,在 FF 下,长串英文会被遮住超出的内容。
word-wrap同word-break的区别
word-wrap:
normal  Default. Content exceeds the boundaries of its container.
break-word Content wraps to next line, and a word-break occurs when necessary. 必要时会触发word-break。
word-break:
normal  Default. Allows line breaking within words. 好像是只对Asian text起作用。
break-all Behaves the same as normal for Asian text, yet allows the line to break arbitrarily for non-Asian text. This value is suited to Asian text that contains some excerpts of non-Asian text.
keep-all Does not allow word breaking for Chinese, Japanese, and Korean. Functions the same way as normal for all non-Asian languages. This value is optimized for text that includes small amounts of Chinese, Japanese, or Korean.
测试代码如下:
1.htm===================================================================
<style>
.c1{ width:300px; border:1px solid red}
.c2{ width:300px;word-wrap:break-word; border:1px solid yellow}
.c3{ width:300px;word-wrap:break-word;word-break:break-all; border:1px solid green}
.c4{ width:300px;word-wrap:break-word;word-break:keep-all; border:1px solid blue}
.c5{ width:300px;word-break:break-all; border:1px solid black}
.c6{ width:300px;word-break:keep-all; border:1px solid red}
.c7{ width:300px;word-wrap:break-word;overflow:auto; border:1px solid yellow}
</style>
.c1{ width:300px; border:1px solid red}
<div class="c1">
safjaskflasjfklsajfklasjflksajflksjflkasjfksafj
</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>
<br>
.c2{ width:300px;word-wrap:break-word; border:1px solid yellow}
<div class="c2">
safjaskflasjfklsajfklasjflksajflksjflkasjfksafj
</div>
<div class=c2>
This is all English. This is all English. This is all English.
</div>
<div class=c2>
全是中文的情况。全是中文的情况。全是中文的情况。
</div>
<div class=c2>
中英文混排的情况。Chinese and English. 中英文混排的情况。Chinese and English.
</div>
<br>
.c3{ width:300px;word-wrap:break-word;word-break:break-all; border:1px solid green}
<div class="c3">
safjaskflasjfklsajfklasjflksajflksjflkasjfksafj
</div>
<div class=c3>
This is all English. This is all English. This is all English.
</div>
<div class=c3>
全是中文的情况。全是中文的情况。全是中文的情况。
</div>
<div class=c3>
中英文混排的情况。Chinese and English. 中英文混排的情况。Chinese and English.
</div>
<br>
.c4{ width:300px;word-wrap:break-word;word-break:keep-all; border:1px solid blue}
<div class="c4">
safjaskflasjfklsajfklasjflksajflksjflkasjfksafj
</div>
<div class=c4>
This is all English. This is all English. This is all English.
</div>
<div class=c4>
全是中文的情况。全是中文的情况。全是中文的情况。
</div>
<div class=c4>
中英文混排的情况。Chinese and English. 中英文混排的情况。Chinese and English.
</div>
<br>
.c5{ width:300px;word-break:break-all; border:1px solid black}
<div class="c5">
safjaskflasjfklsajfklasjflksajflksjflkasjfksafj
</div>
<div class=c5>
This is all English. This is all English. This is all English.
</div>
<div class=c5>
全是中文的情况。全是中文的情况。全是中文的情况。
</div>
<div class=c5>
中英文混排的情况。Chinese and English. 中英文混排的情况。Chinese and English.
</div>
<br>
.c6{ width:300px;word-break:keep-all; border:1px solid red}
<div class="c6">
safjaskflasjfklsajfklasjflksajflksjflkasjfksafj
</div>
<div class=c6>
This is all English. This is all English. This is all English.
</div>
<div class=c6>
全是中文的情况。全是中文的情况。全是中文的情况。
</div>
<div class=c6>
中英文混排的情况。Chinese and English. 中英文混排的情况。Chinese and English.
</div>
<br>
.c7{ width:300px;word-wrap:break-word;overflow:auto; border:1px solid yellow}
<div class="c7">
safjaskflasjfklsajfklasjflksajflksjflkasjfksafj
</div>
<div class=c7>
This is all English. This is all English. This is all English.
</div>
<div class=c7>
全是中文的情况。全是中文的情况。全是中文的情况。
</div>
<div class=c7>
中英文混排的情况。Chinese and English. 中英文混排的情况。Chinese and English.
</div>
·分享到:
·看完后,您有任何想法或观点,请立即参与评论
·或者:向飞度网提问 留言 举报 纠错
·更多关于  word-wrap word-break 换行 文字 IE FIREFOX 网页 的内容
 
站内搜索:
·相关评论
  还没有人评论!赶快第一个发表评论吧!
·我来评论
评论内容(必填)

注:评论内容限200字,不支持图片和链接。
您的姓名(选填): 
注:姓名所有人可见,可以填写昵称。
联系方式(选填): 
注:联系方式仅管理员可见,推荐填写电子邮箱。
评价(选填): 
不好
验证码(必填): 
验证码,看不清楚?请点击刷新验证码
版权与免责声明:
1. 凡注明来源为“飞度网”(faydo.com 以下简称为"本站")的所有作品(文章、资料),包括文字与图片,除特殊注明外均可转载,但必须保留版权信息并回链。违反上述声明者,本站将依法追究法律责任。
2. 凡未注明来源的作品(文章、资料),均转载自互联网,本站转载的目的在于传播更多信息,此类作品(文章、资料)并不代表本站观点,本网不承担此类作品侵权行为的直接责任及连带责任。
3. 如因作品内容、版权等需要同本站联系的,请使用页面底部的联系方式。
4. 本站竭力确保所刊载的作品(文章、资料)准确可靠,但不保证该等资料绝对正确可靠;对于任何因资料不确或遗漏又或因根据或依赖本站资料所作决定、行动或不行动而引致的损失或损害,本站概不负责(不论是民事侵权行为责任或合约责任或其他)。
5. 网友评论不代表本站观点。
设为首页 收藏本页 留言与建议 网站地图
©2016 飞度网 版权所有 联系方式:请邮件联系或msn联系。