问题描述

在修改bug过程中，遇到列表中的字符串过长，解决方案是尾部用省略号代替。鼠标悬停时，用悬停框的形式显示全部信息。

首先，对于列表中的字符串长度过长，对这列字符串设置css属性，列表代码情况如下：

目标效果1：内容超过一定长度后以省略号显示

做法：对列表中的serach-item设置css属性

1. white-space: nowrap 保证文本内容不会自动换行，如果多余的内容会在水平方向撑破单元格。
2. overflow: hidden 隐藏超出单元格的部分。
3. 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。

最终效果：成功