1. 场景
当显示文本的内容过长,可以截断文本,省略号显示,然后给标签设置title属性,鼠标移入的时候显示完整内容。但在火狐和IE浏览器中,当文本字符长度超过六七十(大概,网上看到的)的时候,会显示不完全,如图:
IE还在tip中自己截断了......
火狐的直接右边边框都没了
截止2020-11-17,IE11和Firefox80.0.1依然存在这个问题。
2. 问题分析及解决
网上查了一下,似乎手动给文本换行可以解决,每隔大约60个字符换行,可以正常显示。使用正则对文本进行处理,以react渲染语法举例:
<p title={ text.replace(/(.{50})/g, "$1\n") } >
{text}
</p>
取个整,每50个字符添加换行,效果如下: