单行居中显示文字，多行居左显示，最多两行超过用省略号结尾

将 p 设置为display:inline-block ，利用 inline-block 元素可以被父级 text-align:center 居中的特性，这样就可以实现单行居中，多行居左

html

<div><p><em>单行居中显示文字</em></p></div>
<div><p><em>单行居中显示文字，多行居左显示</em></p></div>
<div><p><em>单行居中显示文字，多行居左显示，最多两行超过用省略号结尾</em></p></div>

css

div{
    position:relative;
    width: 200px;           
    text-align: center;
    margin-bottom: 10px;
}            
p{
    /*多行居左*/
    display: inline-block;
    text-align: left;            
}
em{
    font-style: normal;
    /*超出两行省略*/
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;/*从上向下垂直排列子元素*/
    overflow: hidden;
    text-overflow: ellipsis;
}