文本省略显示

2017-02-27

字数: 661 阅读时长: 3mins 阅读次数: 次

分类： css

在开发中有一些情景下需要隐藏过多的文本，比如文章列表中文章的描述或者摘要，并加以省略号给用户提醒，在这里对常用的方法进行简单的总结：

单行文本省略

单行文本省略很简单，只需三行css属性即可：

<p>这里是一段用脸滚出来的文字：卡技术的恢复了开始发说说的反馈啦活动福利很好的数量咖啡还</p>

p {
  width: 200px; 
  white-space: nowrap; //强制文本单行显示
  overflow: hidden; //溢出内容隐藏
  text-overflow: ellipsis; //文本溢出内容添加省略号提醒
  border: 3px solid #333
}

这种方法现在已经被主流浏览器支持，不再多言。

多行文本省略

多行文本省略在有些情况下也会用到，这个功能目前没有通用的纯CSS的实现方式，在不同浏览器的实现方式不一致，主要有以下几种实现方式：

Webkit 浏览器的专有方法

webkit 内核的浏览器提供了一些专用属性 -webkit-line-clamp 支持指定多行文本省略：

p {
  width: 200px; 
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  border: 3px solid #333;
}

Opera 浏览器的专有方法：

webkit 内核的浏览器提供了一些专用属性值 -o-ellipsis-lastline 支持指定多行文本省略：

p {
  line-height: 20px;
  max-height: 60px;
  overflow: hidden;
  text-overflow: -o-ellipsis-lastline;
}

支持 Firefox 和 IE 浏览器上的方法：

以上两种方法在火狐和ie上并不被支持，但是可以通过限制内容块的高度，并且为内容块设置一个额外的省略号的代码块覆盖在段落最后：

p {
  //为p元素增加相对定位
  position: relative;
  width: 200px; 
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  border: 3px solid #333;

  //火狐下保证仅显示三行
  line-height: 20px;
  max-height: 60px;
}

p::after {
  position: absolute;
  content: '\02026'; //省略号的编码
  background: #fff;
  bottom: 0;
  right: 0;
  padding-left: 30px;
  //颜色和p的背景色保持一致
2background: linear-gradient(to right, rgba(255, 255, 255, 0), white 50%, white);
}

这种方法的实现效果会和前两种有所差异，如果对展示的一致性要求较高，可以只采用这种方法，或者下一节的js方法实现。

使用js

使用js基本可以保证在不同的浏览器下有相同的效果，支持这个功能的 js库有好多，比如 Clamp.js 等，相关细节可以参考文档。