word-wrap 换行
在了解这个 属性 前，首先要说的是它只用于英文。
1. 官方定义
word-wrap 属性 允许长单词或 URL 地址换行到下一行。
2. 解释
当 一个 英文单词，或者一段很长且中间没有空格的 英文字母 的文本超出文本所在元素边缘时候，直接将超出的部分换行，而不是把这个连续的文本直接全部另起一行。
3. 语法
word-wrap : nor mal|break-word ;
.demo {
word-wrap : break-word ;
}
属性 值
值 说明 nor mal 就是按照浏览器自己的排版规则，不设置就是 默 认。 break-word 当连续的英 文字 符超过元素的宽度时候直接折行，而不是把整个连续的英文单词换行。
4. 兼容性
IE Edge Firefox Chrome Safari Opera ios android all all all all all all all all
5. 实例
对超出元素区域的的文本换行。
< div class = " demo " >
class.imooc.com class.imooc.com
</ div >
< div class = " demo demo-1 " >
class.imooc.com class.imooc.com
</ div >
.demo {
background : #ccc ;
width : px ;
height : px ;
margin-b ott om : px ;
}
.demo-1 {
word-wrap : break-word ;
}
效果 图
对超出元素区域的的文本换行 效果 图
说明： 上图是没有使用换行 属性 的 效果 。下图使用了换行 属性 。
6. 经验 分享
这个 属性 有 一个 近似 属性 wrod-break ,我们通过表面意思进行区分。 wrod-wrap 主要是换行， wrod-break 是用来英文单子怎么在内断开的。
最后我们在一次对比下这两个 属性
< div class = " demo " >
class.imooc.com class.imooc.com
</ div >
< div class = " demo demo-1 " >
class.imooc.com class.imooc.com
</ div >
< div class = " demo demo-2 " >
class.imooc.com class.imooc.com
</ div >
.demo {
background : #ccc ;
width : px ;
height : px ;
margin-b ott om : px ;
}
.demo-1 {
word-wrap : break-word ;
}
.demo-2 {
word-break : break-all ;
}
效果 图
`wrod-wrap`对比 `wrod-break` 效果 图
说明 从左往右，第一张图什么都不设定，第二张图设置 word-wrap: break-word ,它在空格处换行了。而第三章图设置 word-break:break-all; 在空格处没有换行而是打破了连续的单词。
7. 小结
必须要是连续的英 文字 符。 这个 属性 主要是对英文起作用，如果中英文混杂，则优先把 中文 和英文先换行，然后再打破连续的英文单词。
letter-spacing 字间距 ? ?word-break 文本打断