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.

总结如下:
word-wrap是控制换行的。
使用break-word时,是将强制换行。中文没有任何问题,英文语句也没问题。但是对于长串的英文,就不起作用。

break-word是控制是否断词的。
normal是默认情况,英文单词不被拆开。
break-all,是断开单词。在单词到边界时,下个字母自动到下一行。主要解决了长串英文的问题。
keep-all,是指Chinese, Japanese, and Korean不断词。即只用此时,不用word-wrap,中文就不会换行了。(英文语句正常。)

ie下:
使用word-wrap:break-word;所有的都正常。

ff下:
如这2个都不用的话,中文不会出任何问题。英文语句也不会出问题。但是,长串英文会出问题。
为了解决长串英文,一般用word-wrap:break-word;word-break:break-all;。但是,此方式会导致,普通的英文语句中的单词会被断开(ie下也是)。

目前主要的问题存在于 长串英文 和 英文单词被断开。其实长串英文就是一个比较长的单词而已。
即英文单词应不应该被断开那?那问题很明显了,显然不应该被断开了。
对于长串英文,就是恶意的东西,自然不用去管了。但是,也要想些办法,不让它把容器撑大。
用:overflow:auto; ie下,长串会自动折行。ff下,长串会被遮盖。

所以,综上,最好的方式是word-wrap:break-word;overflow:hidden;而不是word-wrap:break-word;word-break:break-all;。
word-wrap:break-word;overflow:auto;在ie下没有任何问题。在ff下,长串会被遮住部分内容。

另,测试代码如下:

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>

转载于:https://www.cnblogs.com/htht66/archive/2007/09/04/882116.html

word-wrap同word-break的区别相关推荐

  1. C#根据WORD模板生成WORD文档 C#网页打印

    运行环境:WIN7 X64 + iis6.1 开发环境:vs2012+SQL2005 服务器环境:2003 X64 + SQL2005 + IIS 6.0 需求: 企业中需要各种各样的报表诸如WORD ...

  2. win10安装应用商店版word(ump版word)

    1.在应用商店中搜索word,得到word链接地址: https://www.microsoft.com/en-us/p/word/cfq7ttc0k7c7?activetab=pivot%3aove ...

  3. 关于最近word模板以及word转pdf的总结

    主要的学习和踩坑 word模板1类型只有文字的只要用这种方式实现非常好,没有图片的word模板;特别注意的是支持.doc的模板 2 第二种带图片的word模板,只支持 docx的 4 word转pdf ...

  4. 使用java Apache poi 根据word模板生成word报表

    使用java Apache poi 根据word模板生成word报表 使用poi读取word模板,替换word中的{text}标签,并根据自定义标签循环生成表格或表格中的行. 代码示例下载:https ...

  5. c语言读取word文件内容,c 读取word c 读取word文档

    c++如何读取word 基本步骤(1)创建)一个 MFC 的程序工程. 注意:在VC中对WORD进行操作需要在MFC AppWizard - Step 2 of4中的Automaiton选项上打上勾. ...

  6. linux qt 生成word,Qt 生成word、pdf文檔

    需求:將軟件處理的結果保存為一個報告文檔,文檔中包含表格.圖片.文字,格式為word的.doc和.pdf.生成word是為了便於用戶編輯. 開發環境:qt4.8.4+vs2010 在qt的官網上對於p ...

  7. continue和break的区别

    continue和break的区别 break: 退出循环,终止循环 continue: 终止当前循环跳出,继续下一次循环 会跳过第N次,而不会终止循环 例子: public class test8 ...

  8. return和break的区别

    直接上代码,里面有说明 //return 和 break 的区别 int test_return (void) {do{printf("test_return start\r\n" ...

  9. java中iscontinue意思_Java 中return、continue和break的区别

    写在前面:适合Java初学者,大神就别来了. 今天同事突然问我return和break的区别,以前觉得随口都能说出来的东西,今天突然卡了,记得模模糊糊,只能说出个大概,所以这里做一个总结,还是那句话, ...

  10. word模板生成word报表文档

    主要功能为根据word模板生成word报表文档,注意引用Interop.Word.dll; 首先要生成word程序对象 Word.Application app = new Word.Applicat ...

最新文章

  1. 框架:初识Spring
  2. [BZOJ2707]走迷宫
  3. 机房收费系统重构(五)—登陆窗口完整版
  4. boost::mp11::mp_take相关用法的测试程序
  5. el-amap 第一次正常第二次报错_flutter run: build tools revision 报错解决
  6. gulp教程之gulp-minify-css【gulp-clean-css】
  7. stl iterator_在C ++ STL中使用const_iterator访问字符列表的元素
  8. 系统架构性能优化思路
  9. struts Caused by: no protocol dtd - Class: java.net.URL
  10. http://book.ifeng.com/lianzai/detail_2011_05/08/6243572_37.shtml
  11. 从数学的视角看社交网络
  12. exe打包工具,封装exe安装程序--Inno Setup
  13. python ftp下载上传文件或文件夹
  14. 电脑提示文件或目录损坏且无法读取
  15. ddl是什么意思网络语_跟随你大学的流行词语 DDL 你竟还不知道?
  16. hive大数据量实现分页查询,java结合mybatis及多数据源(hive、MySQL)
  17. 猫抓 浏览器插件安装教程,适用Chrome浏览器和Edge浏览器
  18. 2011 ATMEL AVR 校园设计大赛获奖名单
  19. Chino with Train to the Rabbit Town(前缀异或和)+(前缀后缀或)
  20. Cris 的Python日记(四):Python 数据结构之序列和列表

热门文章

  1. 到底是去大厂当大头兵?还是在小厂磨炼好?
  2. 第七章第二节:Java类和对象之封装、包和static成员
  3. Deployment 回滚
  4. 小米5x wlan无法打开解决
  5. 黑马程序员——随机菜谱
  6. python下载包突然卡住不动了怎么办_docker pull卡住,下载不动,更换镜像源
  7. 视频回放 | 如何成为一名优秀的地学和生态学领域的国际期刊审稿人?
  8. springboot乐校园二手书交易管理系统
  9. access重命名自动保存的宏_如何将宏保存为自动执行的宏计算机二级access的一个题目。 题目完整为“请重命名宏mTest,并保存为自动执行宏。”...
  10. Eclipse开发Android平台的飞机大战游戏APP