多行文本溢出显示省略号全攻略

大家应该都知道用 属性来实现单行文本的溢出显示省略号(…)。当然部分浏览器还需要加宽度width属性。第一种仅支持单行省略:

第二种支持多行省略:

第三种跨浏览器兼容的方案:这种方法的HTML:

这种方式的CSS样式为:

总结一下:

第四种方式:网上介绍很多关于使用JavaScript实现多行文本溢出省略的办法,有的使用插件,有的使用自己封装好的JavaScript文件,但是,我认为,还是自己写的js比较好用。代码如下:HTML:

CSS:

js:

支持多行文本溢出的css属性主要是属性,但是,这个属性目前只有chrome浏览器支持。所以,需要兼容各个版本的浏览器,个人认为还是最后一种方式比较好用。

  • 发表于:
  • 原文链接http://kuaibao.qq.com/s/20180513A0G0MP00?refer=cp_1026
  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。
  • 如有侵权,请联系 yunjia_community@tencent.com 删除。

扫码关注云+社区

领取腾讯云代金券