关于一行或多行文本省略号和居中显示

在分享此方法之前，先来学习一下另一个知识

说明：关于display设置弹性盒布局不了解的童鞋可以看我的另一篇文章：display的详细用法

display:flex;display:box;display:flexbox;的区别

上面是三种设置弹性盒布局的方式，分别代表不同时代的设置弹性盒布局的方式：

display:box;是09年的语法版本，使用时需要加上浏览器的前缀，目前已经过时

display:flexbox;11年提出的一个奇葩的语法版本，非官方的，

主要是为IE10浏览器使用

display:flex;12年之后提出的最新修正的语法版本，浏览器支

持交好，是目前常用的语法

下面的表格是详细的版本适用信息

display:box

浏览器支持：

IE	Firefox	Chrome	Safari	Opera
不支持	2.0-40.0 （-moz-）	4.0-45.0 （-webkit-）	6.0-8.0 （-webkit-）	15.0-29.0 （-webkit-）

display:flex

浏览器支持：

IE	Firefox	Chrome	Safari	Opera
11.0+	22.0+	21.0+（-webkit-） 29.0+	6.1+（-webkit-） 9.0+	15.0+（-webkit-） 17.0+

较为完整的兼容性代码，如下：

.box {
display: -webkit-box; /* Chrome 4+, Safari 3.1, iOS Safari 3.2+ */
display: -moz-box; /* Firefox 17- */
display: -webkit-flex; /* Chrome 21+, Safari 6.1+, iOS Safari 7+, Opera 15/16 */
display: -moz-flex; /* Firefox 18+ */
display: -ms-flexbox; /* IE 10 */
display: flex; /* Chrome 29+, Firefox 22+, IE 11+, Opera 12.1/17/18, Android 4.4+ */
}

基于上面的说明，下面的就很好理解了

文本超出部分的省略号显示通用的方法

/*将盒模型转换为弹性盒模型*/

display：-webkit-box;

display：-ms-flexbox;

display：-webkit-box;

display：flex;

/*限制一个块元素中显示的文字的行数*/

-webkit-line-clamp:
1;

/*检索或设置伸缩盒对象中子元素的排列方式*/

-webkit-box-orient:
vertical;

/*可以用来设置当文本超出-webkit-line-clamp设置

的显示文字行数时，后面的用省略号“...”表示*/

        text-overflow:
ellipsis;
        /*超出部分文本设置隐藏*/
        overflow:
hidden;
总结：将上面的代码进行复制，就能得到多行文本超出部分显示
“...”了。