元素值过长导致页面布局异常，jQuery截取字符串，悬停显示全称

原创于 2016-04-28 15:04:56 发布 · 202 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #ViewUI

本文介绍了一种在前端开发中常见的需求实现方法：当元素值过长时进行截断并以省略号形式显示剩余部分，同时通过鼠标悬停显示完整值。此方法适用于表格或列表展示大量数据时优化用户体验。

// 元素值过长,截取显示,鼠标悬停显示全部值 2016-04-28
function valueSubString(id, value) {
    var idStr = $("#" + id);
    var valueStr = '${value}';
    if (valueStr.length > 10) {
        idStr.html(valueStr.subString(0, 10) + "...");
        idStr.attr("title", valueStr);
    } else {
        idStr.html(valueStr);
    }
}