列表内容超出范围显示...,鼠标悬停显示全部内容

js  部分

/**
 * initShowContent
 * 使用说明:参数(id的名称字符串格式,表格td的要显示全部的class名称字符串格式)
 * 列表外层元素必须添加类.items_ellipsis,
 * 列表项必须添加class为.item_content
 * 列表项内部内容用 <span class="content">内容</span> 嵌套
 * @param idname
 * @param contentClassName
 */
function initShowContent(idname,contentClassName){
    var _items=$("#"+idname +" "+"."+contentClassName);
    var cellIndex1 = parseInt(_items.length) - 1;
    _items.each(function() {
        if (this.cellIndex != cellIndex1) {
            $(this).attr("title", $(this).text());
        }
    });
}

html 部分

initShowContent(idname, 'item_content');

css 部分

/*表格内容超出内容点点点,不影响table自适应宽度*/
 .item_ellipsis li{
    word-break: keep-all; /* 不换行 */
    white-space: nowrap; /* 不换行 */
}

 .item_ellipsis li.item_content {
    overflow: hidden;
    text-overflow: ellipsis;
}

 .content {
    width:256px;
    display: inline-block;
    word-break: keep-all; /* 不换行 */
    white-space: nowrap; /* 不换行 */
    overflow: hidden; /* 内容超出宽度时隐藏超出部分的内容 */
    text-overflow: ellipsis; /* for IE */
    -moz-text-overflow: ellipsis; /* for Firefox,mozilla,在chrome中测试也通过了*/
}

显示效果

这是我在项目中使用的效果