对超出父元素的文本进行处理

#设置文本内容超出父元素时截断

在页面开发时，经常会遇到需要把文本内容截取一部分显示的情况，比如QQ空间中对长内容进行折叠。
这里牵扯到三个CSS属性

**text-overflow**
**white-space**
**overflow**

overflow

overflow 属性定义了当元素大小溢出父元素的框时触发溢出事件的操作（常见于P与span元素），比如超出部分被截断或者应滚动条显示
取值如下

1. visible 默认值。内容不会被修剪，会呈现在元素框之外。
2. hidden 内容会被修剪，并且其余内容是不可见的。
3. scroll 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
4. auto 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
5. inherit 规定应该从父元素继承 overflow 属性的值。

#text-overflow
text-overflow属性定义文本内容溢出时的代替文本，需要和overflow属性配合使用，因为其本身并不能设置触发溢出事件，只有当overflow设置为hidden时该属性才有意义
语法如下：

text-overflow: clip|ellipsis|string;

	 1. clip	    修剪文本。
	 2. ellipsis	显示省略符号来代表被修剪的文本。
	 3. string	    使用给定的字符串来代表被修剪的文本。	

#white-space
父元素大小未确定情况下 使用p元素放置长文本时，P元素会自动换行然后把父元素的大小撑开，不会触发溢出事件，很多时候我们也希望只显示一行文本内容，white-space属性就可以做到这一点 （实际上是对文本中空格符的处理）

1. normal 默认。空白会被浏览器忽略。
2. pre 空白会被浏览器保留。其行为方式类似 HTML 中的

    标签。

3. nowrap 文本不会换行，文本会在在同一行上继续，直到遇到
   标签为止。
4. pre-wrap 保留空白符序列，但是正常地进行换行。
5. pre-line 合并空白符序列，但是保留换行符。
6. inherit 规定应该从父元素继承 white-space 属性的值。

于是 想要实现P元素保留单行文字并用省略号填充 需要设置CSS如下

p
{
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}