word-break 文本打断
这个 属性 主要用来处理英文单词，在超出一行之后如何换到下一行的规则。
1. 官方定义
word-break 属性 规定 自动 换行的处理 方法 。
2. 解释
一段英文段落，在其文本所在的元素边缘通常都会把整个单词另起一行，而这个 属性 可以打破这种排版方式，让这个段落的英文单词都是分开的，同汉字一样，在元素的边缘只是最后 一个 字母换行。
3. 语法
word-break : nor mal|break-all|keep-all ;
.demo {
word-break : break-all ;
}
属性 值
值 说明 nor mal 就是按照浏览器自己的排版规则，不设置就是 默 认。 break-all 其意义就同英文直接翻译一样，打破所有的英文单词，可以在任意的字母处另起一行。 keep-all 只能在 半角 空格或连字符处换行。
4. 兼容性
IE Edge Firefox Chrome Safari Opera ios android all all all all all all all all
5. 实例
@H_ 404 _154@对超出元素区域的的文本换行。
< 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-break : break-all ;
}
效果 图
@H_ 301 _276@
对超出元素区域的的文本换行 效果 图
说明： 上图是没有使用换行 属性 的 效果 。下图使用了换行 属性
@H_ 404 _154@仅对段落中的 半角 空格和连字符进行换行。
< div class = " demo-2 " >
class imooc-com class imooc-com classimooccom
</ div >
.demo-2 {
background : #ccc ;
width : px ;
height : px ;
word-break : keep-all ;
}
效果 图
@H_ 301 _276@
对段落中的 半角 空格和连字符进行换行 效果 图
说明： 如图第一行的结尾使用了连字符所以后面的英 文字 符换行了，第二行使用了空格所以后面的也换行了，而第三行没有空格或连字符因此没有换行。
6. 经验 分享
这个 属性 用来处理当我们不想让 一个 英文单词直接下一行，而是从中间断开，断开的地方换行例如我们使用连字符的时候。
7. 小结
@H_ 404 _154@这个和 word-wrap 有区别， word-wrap 必须要是连续的英 文字 符,而它没有限制，所以不要记混。 @H_ 404 _154@这个 属性 对英 文字 符、 半角 空格、连字符都起作用。
word-wrap 文本换行 ? ?text-shadow 文本阴影