文本溢出设置

单行文本溢出显示省略号

要实现单行文本溢出时产生省略号的效果还需定义：
1、容器宽度：width：value；
2、强制文本在一行内显示:white-space：nowrap;
3、溢出内容为隐藏：overflow：hidden；
4、溢出文本显示省略号：text-overflow：ellipsis;

Text-overflow属性

1.text-overflow：clip 不显示省略号（…），而是简单的裁切;
2.text-overflow：ellipsis 当单行文本溢出时显示省略标记

White-space属性

属性	描述
white-space：normal	默认值
white-space：nowrap	文本不会换行，文本会在同一行上继续，直到遇到 标签为止
white-space：pre	空白符会被保留，就是说浏览器可以识别空格。
white-space：pre-line	合并空白符序列，但是保留换行符。
white-space：pre-wrap	保留一部分空白符序列，但是正常的进行换行

Overflow属性

属性	描述
overflow:visible	visible:默认值，内容不会被修剪，会呈现在元素框之外
overflow:hidden	hidden：内容会被修剪，并且其余内容是不可见的
overflow:auto	auto：如果内容被修剪，则浏览器会显示滚动条，以便查看其他的内容
overflow:scroll	scroll：内容会被修剪，但是浏览器会显示滚动条，以便查看其余的内容

扩展：多行显示省略号

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