（jQuery）列表中字符串长度过长用省略号代替及鼠标悬停显示完整字符串
列表中字符串长度过长用省略号代替及鼠标悬停显示完整字符串jquery
- 问题描述
- 目标效果1：内容超过一定长度后以省略号显示
- 目标效果2：鼠标悬停时，用悬停框的形式显示全部信息。
- 最终效果：成功
问题描述
在修改bug过程中，遇到列表中的字符串过长，解决方案是尾部用省略号代替。鼠标悬停时，用悬停框的形式显示全部信息。
首先，对于列表中的字符串长度过长，对这列字符串设置css属性，列表代码情况如下：
目标效果1：内容超过一定长度后以省略号显示
做法：对列表中的serach-item设置css属性
- white-space: nowrap 保证文本内容不会自动换行，如果多余的内容会在水平方向撑破单元格。
- overflow: hidden 隐藏超出单元格的部分。
- text-overflow: ellipsis 将被隐藏的那部分用省略号代替。
此时，已经完成了第一步工作。
由于字符串隐藏的内容不见了，为了让用户能够看到字符串的全部内容，因此设置鼠标悬停时显示全部内容的功能。我们采取的最终做法是在列表中(li标签)加入titile属性，也就是将完整字符串赋值给title属性。比如title=“字符串内容”,此时问题解决（解决大部分项目问题）。
目标效果2：鼠标悬停时，用悬停框的形式显示全部信息。
然而，由于项目开发中字符串内容是动态的，并且字符串内容item.name的格式如：
DS-2CD5032FWD-A_<font color="red">1</font><font color="red">8</font><font color="red">8</font>.<font color="red">1</font>2<font color="red">1</font>Camera 0<font color="red">1</font>
楼主经过多种方法尝试，最终用正则解决了这个问题。思路：将字符串的html格式数据过滤，然后用把过滤后的字符串赋值给title。
最终效果：成功
