CSS3文本超过高度宽度显示省略号"..."

在写WEB前端代码时，CMS能控制标题、描述等字数，但搜索引擎不希望标题锚文本、完整的描述被切断，控制为前端隐藏(省略号)，使用纯CSS样式这样写：

单行文本省略

p.title{
 width:200px;
 height:60px;
 overflow:hidden;
 white-space:nowrap;
 text-overflow:ellipsis;
}

第三行是文字超过了规定的宽度高度则隐藏，虽然对搜索引擎没什么影响，但对用户不友好，造成阅读障碍，影响点击。

第四行text-overflow属性，规定当文本溢出包含元素时发生的事情。有三个属性

clip 修剪文本
ellipsis 显示省略符号来代表被修剪的文本
string 使用给定的字符串来代表被修剪的文本

上面案例会在超过限制宽度后显示省略号“...”，这个属性属于CSS3，主流浏览器都支持。IE低版本的就不支持了，如果想IE6/IE7/IE8支持CSS3，参考文章《IE6/IE7/IE8浏览器支持CSS3》

多行文本省略

p.title{{
  overflow: hidden; // 溢出隐藏
  word-break: break-all; // 如果文本为一段很长的英文，使用后能使一个单词能够在换行时进行拆分
  text-overflow: ellipsis; // 当对象内文本溢出时显示省略标记（…）
  display: -webkit-box; // 将对象作为弹性伸缩盒子模型显示
  -webkit-line-clamp: 3; /* 控制显示的行数，表示展示X行后多余的缩略展示 */
  -webkit-box-orient: vertical; // 设置或检索伸缩盒对象的子元素的排列方式
}

扩展阅读