文本文字处理的坑

• 多行文字居中

display:table-cell;
vertical-align:middle;
text-align: center; /*设置文本水平居中*/

单行，多行都要文字居中

<div class='box1'>
<div class='box2'>单行</div>
</div>

<div class='box1'>
<div class='box2'>多行多行多行多行</div>
</div>

.box1{
 display: flex;
  justify-content: center;
  align-items: center;
}
.box2{
display:table-cell;
vertical-align:middle;
text-align: center; /*设置文本水平居中*/
}

• 文字换行（行尾对齐显示）
  正常情况写的换行文字并不会首部和尾部都是对齐，尾部会出现空隙的情况

p:{
  word-break:break-all;
}

如果有需求两端都要对齐的话可是使用下面的代码进行处理

p:{
  text-align:justfy
}

image.png

• n行显示省略号

content-title a {
    color: #000000;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    word-break: break-all;
}