火狐FireFox和IE浏览器的title属性文本过长显示不全问题

js 专栏收录该内容
5 篇文章 0 订阅

火狐FireFox和IE浏览器的title属性文本过长显示不全问题

  1. 场景
    当显示文本的内容过长,可以截断文本,省略号显示,然后给标签设置title属性,鼠标移入的时候显示完整内容。但在火狐和IE浏览器中,当文本字符长度超过六七十(大概,网上看到的)的时候,会显示不完全,如图:

在这里插入图片描述

										IE浏览器

IE还在tip中自己截断了…
在这里插入图片描述

										火狐浏览器

火狐的直接右边边框都没了

截止2020-11-26,IE11和Firefox80.0.1依然存在这个问题。

  1. 问题分析及解决
    网上查了一下,似乎手动给文本换行可以解决,每隔大约60个字符换行,可以正常显示。使用正则对文本进行处理,以react渲染语法举例:
<p title={ text.replace(/(.{50})/g, "$1\n") } >
  {text}
</p>

取个整,每50个字符添加换行,效果如下:
在这里插入图片描述

  • 0
    点赞
  • 1
    评论
  • 0
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

©️2021 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值