css实现文字缩略

基础引用

display: -webkit-box;
-webkit-line-clamp:3; /* 限制行数为3 */
-webkit-box-orient: vertical;
overflow: hidden; /* 隐藏超出范围的内容 */
text-overflow: ellipsis /* 文本溢出包含元素时显示省略符号来代表被修剪的文本 */

文本超长打点

• 单行文本

  width: 200px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  

• 多行文本

  width:200px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -wbkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  

注：仅在chrome浏览器中测试过