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

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

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

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

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

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

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

主要是为IE10浏览器使用

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

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

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

display:box浏览器支持：

IEFirefoxChromeSafariOpera不支持2.0-40.0
（-moz-）4.0-45.0
（-webkit-）6.0-8.0
（-webkit-）15.0-29.0
（-webkit-）

display:flex浏览器支持：

IEFirefoxChromeSafariOpera11.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;

总结：将上面的代码进行复制，就能得到多行文本超出部分显示

“...”了。