移动端多行文本扩展符

less than 1 minute read

移动端多行文本超出指定宽度部分设置扩展符, 设置 display 为 box 元素盒子, 然后设置 line-clamp 在显示的行数, 最后基于 box-orient 为 vertical 设置对齐纵坐标对齐的扩展。

.main {
  width: 233px;
  height: 42px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  word-break: break-all;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}