架构师_程序员

 找回密码
 注册[Register]

QQ登录

只需一步,快速开始

查看: 217|回复: 0

[CSS/DIV] html文本溢出显示省略字符的两种常用方法

[复制链接]
发表于 2019-3-15 10:00:25
html文本溢出显示省略字符的两种常用方法
方法一:使用CSS溢出省略的方式解决

解决效果如下:
1244634-20180409101414597-1522653884.png

css代码:

  1. display: -webkit-box; display: -moz-box;
  2. white-space: pre-wrap;
  3. word-wrap: break-word;
  4. overflow: hidden;            
  5. text-overflow: ellipsis;           
  6. -webkit-box-orient: vertical;           
  7. -webkit-line-clamp:2;  
复制代码


方法二:使用jQuery截取替换文本内容的方式解决

解决效果如下:

1244634-20180409101325987-236400193.png

js代码:

  1. $(".text").each(function() {
  2.     if ($(this).text().length > 20) {//要求字数大于20才进行字数替换
  3.         $(this).html($(this).text().replace(/\s+/g, "").substr(0, 80) + "...")
  4.         //从0到80开始替换,将剩余文本内容替换为"..."
  5.     }
  6. })
复制代码


上述两种方法作用在文本内容的类名即可。





上一篇:C语言电子书合集分享
下一篇:C#微信接口之推送模板消息功能示例
码农网,只发表在实践过程中,遇到的技术难题,不误导他人。
您需要登录后才可以回帖 登录 | 注册[Register]

本版积分规则

免责声明:
码农网所发布的一切软件、编程资料或者文章仅限用于学习和研究目的;不得将上述内容用于商业或者非法用途,否则,一切后果请用户自负。本站信息来自网络,版权争议与本站无关。您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容。如果您喜欢该程序,请支持正版软件,购买注册,得到更好的正版服务。

Mail To:help@itsvse.com

QQ|Archiver|手机版|小黑屋|架构师 ( 鲁ICP备14021824号-2 )|网站地图

GMT+8, 2019-5-27 07:41

Powered by Discuz! X3.4

© 2001-2014 Comsenz Inc.

快速回复 返回顶部 返回列表