CSS div内文字显示两行，超出部分省略号显示

1. 概述

1.1 说明

在项目过程中，有时候需要控制div内文字最多显示两行，超出的使用省略号进行处理。使用识别码/前缀-webkit进行处理可直接得到相应效果。

1.2 -webkit

WebKit内核的css前缀为“-webkit-”，Comodo Drangon(科摩多龙)，苹果，安卓，搜狗高速浏览器3，快快浏览器，枫树浏览器，云游浏览器，360极速浏览器，世界之窗极速版，SRWare Iron，猎豹浏览器，RockMelt，QQ浏览器都可识别。

备注：IOS版的微信、android版本的X5内核，都是采用webkit内核。

 2. 代码

2.1 代码示例

• text-overflow属性规定当文本溢出包含元素时发生的事情

  • ellipsis 显示省略符号来代表被修剪的文本(单行溢出)
  • clip 修剪文本
  • string 使用给定的字符串来代表被修剪的文本
  • -o-ellipsis-lastline  从 Opera 10.60 开始有此值，但不在标准之内

• -webkit-line-clamp WebKit支持，不在标准之内(ie和火狐不兼容)

.fontClass {
  color: #333;
  font-size: 28rpx;
  line-height: 40rpx;
  text-overflow: -o-ellipsis-lastline;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

　

2.2 单行示例

.fontClass{
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    word-break: break-all;
}