本文详细介绍了CSS中处理文本换行和隐藏超出内容的方法，包括white-space、word-break、word-wrap和text-overflow等属性的使用。特别提到-webkit-line-clamp属性在限制显示行数上的应用，并探讨了不同浏览器的兼容性问题，提供了实现多行文本溢出隐藏的解决方案。
<!--
white-space: normal|pre|nowrap|pre-wrap|pre-line|inherit;
white-space:设置如何处理元素内的空白；
word-break: normal|break-all|keep-all;
word-break：用来标明怎么样进行单词内的断句
word-wrap: normal|break-word;
word-wrap:用来标明是否允许浏览器在单词内进行断句，这是为了防止当一个字符串太长而找不到它的自然断句点时产生溢出现象。
text-overflow:ellipsis; 让多出的内容以省略号...来表达。但是这个属性主要用于IE等浏览器，Opera浏览器用-o-text-overflow:ellipsis; 而Firefox浏览器没有这个功能，多出的内容只能隐藏起来。
display:-webkit-box; //将对象作为弹性伸缩盒子模型显示。
-webkit-box-orient:vertical; //从上到下垂直排列子元素（设置伸缩盒子的子元素排列方式）
-webkit-line-clamp:2; //这个属性不是css的规范属性，需要组合上面两个属性，表示显示的行数。
/* autoprefixer: off */ /* autoprefixer: on */解决-webkit-box-orient:vertical
-->
通俗点的解释：
word-break:break-all;只对英文起作用，以字母作为换行依据
word-wrap:break-word; 只对英文起作用，以单词作为换行依据
white-space:pre-wrap; 只对中文起作用，强制换行
white-space:nowrap; 强制不换行，都起作用
white-space:nowrap; overflow:hidden; text-overflow:ellipsis;不换行，超出部分隐藏且以省略号形式出现（部分浏览器支持）
案例：案例里面有注释，
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
最低0.47元/天 解锁文章
扫一扫
1145
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
