列表內容超出範圍顯示...,鼠標懸停顯示全部內容

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中測試也通過了*/
}

顯示效果

這是我在項目中使用的效果