一、超出部分展示省略号

1、单行超出部分显示省略号

max-width: 440px; 

font-size: 30px;

line-height: 32px;

white-space: nowrap; 

 overflow: hidden; 

 text-overflow: ellipsis;

单行超出部分显示省略号

2、两行超出部分显示省略号

max-width:440px;

font-size:30px;

max-height:62px;

line-height:32px;

display:-webkit-box;

-webkit-line-clamp:2;

-webkit-box-orient:vertical;

overflow:hidden;

text-overflow:ellipsis;

两行超出部分显示省略号

3、n行超出部分显示省略号

max-width:440px;

font-size:30px;

max-height:32px*n;  // line-height的n倍，这里n=2倍

line-height:32px;

color:rgba(0, 0, 0, 1);

display:-webkit-box;

-webkit-line-clamp:n; // 2行 n=2

-webkit-box-orient:vertical;

overflow:hidden;

text-overflow:ellipsis;

n行超出部分显示省略号，n=2

二、元素垂直或水平居中

1、flex布局垂直居中

li {

  display:flex; // 父元素

  padding:0 30px;

  box-sizing:border-box;

  height:84px;

  align-items:center; // 子元素垂直居中

  border-bottom:1px solid #d9d9d9;

  label {

    flex:1;//子元素

    max-width:210px;

    font-size:30px;

    line-height:32px;

    color:rgba(102, 102, 102, 1);

    margin-right:40px;

}

  span {

    flex:1;

    max-width:440px;

    font-size:30px;

    max-height:62px;

    line-height:32px;

    color:rgba(0, 0, 0, 1);

    display:-webkit-box;

    -webkit-line-clamp:2;

    -webkit-box-orient:vertical;

    overflow:hidden;

    text-overflow:ellipsis;

}

}

2、行内或行内块元素垂直居中

li{
    label{
        verticle-align: middle;
    }    
    span{
         verticle-align: middle;
    }
}

3、水平居中

li{
    margin: 0 auto;
}

4、文字水平居中和垂直居中

height: 40px;
line-height: 40px;
text-align: center;