css行内省略号、垂直居中

应用场景分析：

　　一、当你的文字限定行数，超出部分的文字用省略号显示。

　　　　（有两个使用场景：1、单行 2、多行）

// 单行
overflow: hidden;
text-overflow:ellipsis;
white-space: nowrap;

// 多行
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;

　　二、当你的高度不定要垂直居中时，这里我们用盒模型布局。

　　（这里要对盒模型做兼容性处理,不然有些手机系统不兼容的。切记~~~~~~~）

        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+ */
        justify-content: center;
        align-items: center;

有些属性不懂的，可以接着看。懂的到这里就ok了：　　　　

justify-content: center;justify-content 用于设置或检索弹性盒子元素在主轴（横轴）方向上的对齐方式。

align-items: center;align-items 属性定义flex子项在flex容器的当前行的侧轴（纵轴）方向上的对齐方式。

　　

　

 

转载于:https://www.cnblogs.com/cczlovexw/p/8252274.html