单行文字、多行文字溢出显示省略号

单行文字溢出显示省略号,必须满足三个条件:
  1. 强制一行内显示文本:white-space:nowrap;
  2. 超出的部分隐藏:overflow:hidden;
  3. 文字用省略号替代超出的部分:text-overflow: ellipsis;
多行文字溢出显示省略号: 多行文本溢出显示省略号,有较大的兼容性,适合webkit浏览器或移动端(移动端大部分都是webkit内核):
overflow:hidden;
text-overflow:ellipsis;
display:-webkit-box;//弹性伸缩盒子模型显示
-webkit-line-clamp:2;// 限制在一个块元素显示的文本的行数
-webkit-box-orient:vertical;

发表评论