CSS中overflow隐藏、滚动条、换行等用法

CSS中的Overflow可以实现隐藏超出对象内容，同时也有显示与隐藏滚动条的作用。overflow 的属性有: visible 、 auto、 hidden 、 scroll，当然overflow可以单独设置X（overflow-x ）和Y（overflow-y）方向的滚动条样式其值与应用与overflow语法用法结构相同。先来看下滚动条例子（auto）：
<div style="width:300px; height:300px;overflow:auto;border:1px solid #000000;">
<div style="background-color:red;width:400px; height:200px;">
第一个div块
</div>
<div style="background-color:gray;width:200px; height:200px;">
第二个div块
</div>
</div>
所以
auto：表示div里的元素如果超出div将显示滚动条；
hidden：表示超出div部分将被隐藏；
visible ：表示超出div部分正常显示；
scroll：表示不管div内元素是否超出div，总是显示滚动条。

下面这中方法也可以实现文字超出部分被隐藏的效果（单行）：
<div style="width:300px;border:1px solid #000000;white-space:nowrap; overflow:hidden; text-overflow:ellipsis;">
第一个div块第一个div块第一个div块第一个div块第一个div块第一个div块
 </div>

注意：由于该属性只对块级元素才有效，所以对于非块级元素，比如td等要加上display:block才有效果。
white-space:规定段落中的文本不进行换行，可能的值有：
normal 默认。空白会被浏览器忽略。
pre 空白会被浏览器保留。其行为方式类似 HTML 中的 <pre> 标签。
nowrap 文本不会换行，文本会在在同一行上继续，直到遇到 <br> 标签为止。
inherit 规定应该从父元素继承 white-space 属性的值。

还有一种换行方式是word-break，适用于块级和内敛元素，可能的属性有：
hyphenate:在恰当的字段换行。
normal:使用浏览器默认的换行规则。
break-all:允许在单词内换行。
keep-all:只能在半角空格或连字符处换行。

text-overflow:ellipsis:表示超出部分以省略号代替。

以下可以实现多行换行，HTML代码为:

<div style="width:400px;display:-webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp:3;overflow: hidden; ">
换行换行换行换行换行换行换行换行换行换行换行换行换行换行换行换行换行换行换行换行换行换行换行换行换行换行换行换行换行换行换行换行换行换行换行换行换行换行换行换行换行换行换行换行换行换行换行换行换行换行换行换行换行换行换行换行换行换行换行换行换行换行换行换行换行换行换行换行换行换行换行换行换行换行换行换行换行换行换行换行换行换行换行换行换行换行换行换行换行换行换行换行换行换行换行换行换行换行换行换行
</div>

三个属性的解释

-webkit-line-clamp：用来限制在一个块元素显示的文本的行数。 
display: -webkit-box： 将对象作为弹性伸缩盒子模型显示。 
-webkit-box-orient ：设置或检索伸缩盒对象的子元素的排列方式 。