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

1. 场景

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


火狐FireFox和IE浏览器的title属性文本过长显示不全问题_第1张图片
IE浏览器

IE还在tip中自己截断了......


火狐FireFox和IE浏览器的title属性文本过长显示不全问题_第2张图片
火狐浏览器

火狐的直接右边边框都没了
截止2020-11-17,IE11和Firefox80.0.1依然存在这个问题。

2. 问题分析及解决

网上查了一下,似乎手动给文本换行可以解决,每隔大约60个字符换行,可以正常显示。使用正则对文本进行处理,以react渲染语法举例:

{text}

取个整,每50个字符添加换行,效果如下:


火狐FireFox和IE浏览器的title属性文本过长显示不全问题_第3张图片
修改后

你可能感兴趣的:(火狐FireFox和IE浏览器的title属性文本过长显示不全问题)