设为首页收藏本站
天天打卡

 找回密码
 立即注册
搜索
查看: 102|回复: 14

html文本溢出显示省略字符的两种常用解决方法

[复制链接]

2

主题

43

回帖

131

积分

注册会员

积分
131
发表于 2024-4-20 10:28:56 | 显示全部楼层 |阅读模式
方法一:使用CSS溢出省略的方式解决
解决效果如下:

css代码:         
  1. display: -webkit-box;
  2.             display: -moz-box;
  3.             white-space: pre-wrap;
  4.             word-wrap: break-word;
  5.             overflow: hidden;
  6.             text-overflow: ellipsis;
  7.             -webkit-box-orient: vertical;
  8.             -webkit-line-clamp:2;   /*显示行数*/
复制代码
方法二:使用jQuery截取替换文本内容的方式解决
解决效果如下:

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. })
复制代码
上述两种方法作用在文本内容的类名即可。
总结
以上所述是小编给大家介绍的html文本溢出显示省略字符的两种常用解决方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!

免责声明:如果侵犯了您的权益,请联系站长,我们会及时删除侵权内容,谢谢合作!

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有账号?立即注册

×

0

主题

38

回帖

75

积分

注册会员

积分
75
发表于 2024-6-1 13:38:38 | 显示全部楼层
谢谢你分享这个信息

0

主题

40

回帖

92

积分

注册会员

积分
92
发表于 2024-6-17 20:48:10 | 显示全部楼层
我们一起努力,共同解决问题吧。

3

主题

40

回帖

148

积分

注册会员

积分
148
发表于 2024-8-21 18:40:00 | 显示全部楼层
看了LZ的帖子,我只想说一句很好很强大!
  • 打卡等级:无名新人
  • 打卡总天数:1
  • 打卡月天数:0
  • 打卡总奖励:30
  • 最近打卡:2024-04-26 21:46:17

2

主题

67

回帖

209

积分

中级会员

积分
209
发表于 2024-8-31 18:36:42 | 显示全部楼层
666666666666666666

0

主题

56

回帖

110

积分

注册会员

积分
110
发表于 2024-9-1 02:19:39 | 显示全部楼层
我想了解更多

2

主题

41

回帖

127

积分

注册会员

积分
127
发表于 2024-9-11 01:17:44 | 显示全部楼层
确实牛逼
  • 打卡等级:初来乍到
  • 打卡总天数:3
  • 打卡月天数:0
  • 打卡总奖励:53
  • 最近打卡:2024-06-07 18:08:41

14

主题

40

回帖

413

积分

中级会员

积分
413

热心会员付费会员

发表于 2024-9-14 04:06:01 | 显示全部楼层
顶一个,观点非常中肯!

0

主题

44

回帖

87

积分

注册会员

积分
87
发表于 2024-9-22 01:22:33 | 显示全部楼层
非常感谢你的观点,让我受益良多!
发表于 2024-9-26 13:56:07 | 显示全部楼层
保持尊重和礼貌对待其他成员是必要的。
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

手机版|小黑屋|爱云论坛 - d.taiji888.cn - 技术学习 免费资源分享 ( 蜀ICP备2022010826号 )|天天打卡

GMT+8, 2024-11-15 05:21 , Processed in 0.091179 second(s), 28 queries .

Powered by i云网络 Licensed

© 2023-2028 正版授权

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