一、超出部分展示省略号
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;
二、元素垂直或水平居中
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;
