html+css---文本省略（省略号）

单行文本省略：

          1.设置元素宽度

          2.设置元素文本内容一行显示 **white-space: nowrap;**

                    属性值：     normal        默认值

                                        nowrap        不能换行（可以用强制换行）

                                        pre-wrap     显示 空格，回车，换行

                                        pre                显示 空格，回车，不显示换行

                                        pre-line        显示 空格，不显示回车，换行

          3.设置元素溢出隐藏 overflow: hidden;

          4.设置溢出文本显示** **text-overflow: ellipsis;****    ==》ellipsis:省略号

                clip    默认值····剪切

                ellipsis    省略号 标记

例：

            width: 5em;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;

#### 多行文本省略

           1.设置宽度

           2.设置几行省略  -webkit-line-clamp 限制款元素显示的文本的··············行数

           3.WebKit的CSS扩展属性，该方法适用于WebKit浏览器及移动端；**-webkit-时chrome兼容标志**

                ** **-webkit-line-clamp;****

                **display: -webkit-box;**   必须结合的属性，将对象作为弹性伸缩盒子模型显示 。

               ** **-webkit-box-orient: vertical;****    必须结合的属性，设置或检索伸缩盒对象的子元素的排列方式 。

                要3个一起连用

           4.overflow: hidden;

例：

            width: 5em;
            overflow: hidden;
            text-overflow: ellipsis;
            -webkit-line-clamp:2;
            display: -webkit-box;
            -webkit-box-orient: vertical;