文字溢出打点处理

1. 单行文字溢出打点

p{
  width: 150px;
  background: pink;
  overflow: hidden;
  white-space: nowrap; //不换行
  text-overflow: ellipsis; //省略号代替溢出
}

 

2.多行文本溢出打点

这里举两行文本溢出打点例子：

p{
  width: 150px;
  display: -webkit-box;//必须结合的属性，将对象作为弹性盒子模型显示
  -webkit-line-clamp: 2; //限制块元素显示文本的行数
  -webkit-box-orient: vertical;//必须结合的属性，设置或检索盒对象的子元素的排列方式
  overflow: hidden;
}

 

回顾知识:

text-overflow: clip; //修建文本

text-overflow: ellipsis; //显示省略符号来代表被修剪的文本

text-overflow: string; //使用给定字符串代替被修剪的文本