清單中字元串長度過長用省略号代替及滑鼠懸停顯示完整字元串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。
最終效果：成功