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