默认情况下，也就是不添加word-break,word-wrap(或者两者属性值均为normal时)，浏览器对于一个单词比较长，以至于本行中剩余的空间已经放不下它时，浏览器会将这个单词移动到下一行。如果一个单词太长，以至于它一个单词的长度都超出元素宽度时，单词就会“冲出范围”，而不会对该单词截断并将截断部分下移。核心在总结部分，如果有不正确的地方希望大家一起讨论

1.white-space

white-space是用来处理元素中的空白符的，有如下常用属性

1.1 white-space: normal

默认值。空白会被浏览器忽略

代码片段：

<style>
div{width: 200px;height: 300px;background-color: #bbffaa;white-space:normal;word-wrap: normal;word-break: normal;
}
</style><div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloremque blanditiis, maxime natus quia illum suscipit cum vitae dolores minus quidem et mollitia voluptate eos deleniti, animi odio, culpa incidunt aliquam?
</div>

效果：
将div中内容更改为如下

<div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloremque blanditiis, maxime natus quia illum suscipit cum vitae dolores minus quidem et mollitia voluptate eos deleniti, animi odio, culpa incidunt aliquam?
</div>

更改后效果如下

1.2 white-space: nowrap

文本不会换行，文本会在在同一行上继续，直到遇到 br 标签为止

代码片段

<style>
div{width: 200px;height: 300px;background-color: #bbffaa;white-space:nowrap;word-wrap: normal;word-break: normal;
}
</style><div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloremque blanditiis, maxime natus quia illum suscipit cum vitae dolores minus quidem et mollitia voluptate eos deleniti, animi odio, culpa incidunt aliquam?
</div>

效果（由于太长，只截选到consectetur）

1.3 white-space:pre

空白会被浏览器保留。其行为方式类似 HTML 中的 pre标签

代码片段

<style>div{width: 200px;height: 300px;background-color: #bbffaa;white-space: pre;word-wrap: normal;word-break: normal;}
</style>
<div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloremque blanditiis, maxime natus quia illum suscipit cum vitae dolores minus quidem et mollitia voluptate eos deleniti, animi odio, culpa incidunt aliquam?
</div>

效果

1.4 white-space:pre-wrap

保留空白符序列，但是正常地进行换行。

代码片段

<style>div{width: 200px;height: 300px;background-color: #bbffaa;white-space:pre-wrap;word-wrap: normal;word-break: normal;}
</style>
<div>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Corrupti, excepturi. Dolores pariatur fugiat harum magni quaerat deserunt doloremque fuga temporibus voluptates excepturi, sit suscipit, dicta consectetur praesentium. Omnis, voluptates iure.
</div>

效果

1.5 white-space:pre-line

合并空白符序列，但是保留换行符

代码片段

<style>div{width: 200px;height: 300px;background-color: #bbffaa;white-space:pre-line;word-wrap: normal;word-break: normal;}
</style>
<div>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Corrupti, excepturi. Dolores pariatur fugiat harum magni quaerat deserunt doloremque fuga temporibus voluptates excepturi, sit suscipit, dicta consectetur praesentium. Omnis, voluptates iure.
</div>

效果

2. word-wrap

word-wrap 属性允许长单词或 URL 地址换行到下一行。

2.1 word-wrap:normal

只在允许的断字点换行（浏览器保持默认处理）

代码

<style>div{width: 200px;height: 300px;background-color: #bbffaa;white-space:normal;word-wrap: normal;word-break: normal;}
</style>
<div>hhh ello wwwwwwwwwwwwwwwwwwwwwwwwww
</div>

效果

注：hhh，ello，www…是三个单词，当浏览器发现第一行的剩余空间已经容不下www…这个单词时，会让它换行。可是，这个单词实在是太长了，第二行也没能容下它，此时www…这个单词就会“冲出去”。

2.2 word-wrap:break-word

在长单词或 URL 地址内部进行换行

代码片段

<style>div{width: 200px;height: 300px;background-color: #bbffaa;white-space:normal;word-wrap:break-word;word-break: normal;}
</style>
<div>hhh ello wwwwwwwwwwwwwwwwwwwwwwwwww
</div>

效果

3.word-break

word-break 属性规定自动换行的处理方法

3.1 word-break:normal

在2.1中以有显示效果，不再展示

3.2 word-break: break-all

使用浏览器默认的换行规则。

代码片段

<style>div{width: 200px;height: 300px;background-color: #bbffaa;white-space:normal;word-wrap: normal;word-break: break-all;}
</style>
<div>hhh ello wwwwwwwwwwwwwwwwwwwwwwwwww
</div>

效果

注：在2.2word-wrap:break-word中，长单词www…是在第一行容不下，换行后，在第二行中也容不下了才对单词换行处理。而word-break: break-word，是在第一行中就直接对www…单词换行。

3.3 word-break: keep-all

只能在半角空格或连字符处换行

代码片段

<style>div{width: 200px;height: 300px;background-color: #bbffaa;white-space:normal;word-wrap: normal;word-break: break-all;}
</style>
<div>hhh ello wwwwww-wwwwwwwwwwwwwwwwwww<br><br>hhh ello wwwwwwwwwwww-wwwwwwwwwwwww<br><br>hhh ello wwwwwwwwwwwwwwwwwwwwwww-ww
</div>

效果

注：长单词www…只有在单词连接符“-”处才会有单词“打断”，将长单词拆分为两个单词。如果前半部分单词不长，以至于能够在第一行剩余空间中存在，则前半部分在第一行中显示，然后后半部分换行显示；如果前半部分比较长，则前半部分单词换行显示，后半部分单词再换一行显示。

4.总结

white-space是针对整个句子的空白处理的，其属性中的normal，nowrap设置是否换行，不涉及单词打断的问题；

word-wrap是单词过长时，是否打断单词，word-wrap:break-word只有当长单词长到下一整行都没办法显示的时候，才会让长单词先换到下一行，再在末尾字符处打断单词；

word-break是怎样对长单词打断(或者说什么时候对长单词打断)，
word-break:break-all是“在任何时候，一行中末尾单词在该行中显示不下去了，在末尾字符处对该行末尾单词打断”；
word-break:keep-all是“一行中末尾单词在该行中显示不下去了，只有在单词链接符处对单词打断”

单词打断后，其实就相当于是两个单词的处理方式了。

word-wrap和word-break,white-space的区别相关推荐

C#根据WORD模板生成WORD文档 C#网页打印
运行环境:WIN7 X64 + iis6.1 开发环境:vs2012+SQL2005 服务器环境:2003 X64 + SQL2005 + IIS 6.0 需求: 企业中需要各种各样的报表诸如WORD ...
关于最近word模板以及word转pdf的总结
主要的学习和踩坑 word模板1类型只有文字的只要用这种方式实现非常好,没有图片的word模板;特别注意的是支持.doc的模板 2 第二种带图片的word模板,只支持 docx的 4 word转pdf ...
使用word模板生成word文档的各类方案
使用word模板生成word文档的各类方案生成word的各种方案 word另存xml进行后续处理 2003版本word(.doc)的xml处理并生成word 2007版本word(.docx)的xm ...
Python PDF转Word,以及提取Word中图片里的文字
PDF转Word,以及提取Word中图片里的文字 PS: 也是从网上各个帖子中学习的Python,因此代码的格式以及内容有粘贴网上其他大神的代码,如有侵权请告知删除软件截图: #!/usr/bin/ ...
使用java Apache poi 根据word模板生成word报表
使用java Apache poi 根据word模板生成word报表使用poi读取word模板,替换word中的{text}标签,并根据自定义标签循环生成表格或表格中的行. 代码示例下载:https ...
c语言读取word文件内容,c 读取word c 读取word文档
c++如何读取word 基本步骤(1)创建)一个 MFC 的程序工程. 注意:在VC中对WORD进行操作需要在MFC AppWizard - Step 2 of4中的Automaiton选项上打上勾. ...
linux qt 生成word,Qt 生成word、pdf文檔
需求:將軟件處理的結果保存為一個報告文檔,文檔中包含表格.圖片.文字,格式為word的.doc和.pdf.生成word是為了便於用戶編輯. 開發環境:qt4.8.4+vs2010 在qt的官網上對於p ...
word模板生成word报表文档
主要功能为根据word模板生成word报表文档,注意引用Interop.Word.dll; 首先要生成word程序对象 Word.Application app = new Word.Applicat ...
ie8 html 编辑器为word,ie8生成word
1. 兼容IE8 导出Wrod方法直接var word=new ActiveXObject("word.Application");word.visible=true:(这句不要 ...
Word中两端对齐、分散对齐的区别
Word中两端对齐.分散对齐的区别 [转] http://www.dzwebs.net/3734.html 在Word文档中,默认的对齐方式为两端对齐,但是很多人都不知道两端对齐的效果到底是什么,因 ...

word-wrap和word-break,white-space的区别

1.white-space

1.1 white-space: normal

1.2 white-space: nowrap

1.3 white-space:pre

1.4 white-space:pre-wrap

1.5 white-space:pre-line

2. word-wrap

2.1 word-wrap:normal

2.2 word-wrap:break-word

3.word-break

3.1 word-break:normal

3.2 word-break: break-all

3.3 word-break: keep-all

4.总结

word-wrap和word-break,white-space的区别相关推荐

最新文章

热门文章