ie8及其以下版本兼容性問題之文本省略

1. 單行文本省略

單行文本省略適用於文本超出內容顯示區，則在末尾顯示省略號

1.1 普通文本超出省略

普通文本超出顯示省略號，示例：

.p{
    height: 30px
    line-height: 30px;
    font-size: 16px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space:nowrap;
}

1.2 單元格文本超出省略

首先應設置表格屬性table-layout爲fixed；然後再爲單元格設置省略，示例：

table{
    table-layout: fixed;
}
table tr{
    height: 30px;
    line-height: 30px;
    font-size: 16px;
}
table tr th,table tr td{
    padding: 0 20px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

2. 多行文本省略

多行文本省略適用於文本超出內容顯示區高度，則在最後一行的末尾顯示省略號

2.1 css實現多行省略

通過使用僞元素添加content爲…的方式顯示，此種方法需要引入半透明圖片作爲僞元素背景，示例：

.p{
    height: 66px;
    line-height: 22px;
    position: relative;
    overflow: hidden;
}
.p::after{
    content: "...";
    position: absolute;
    bottom: 0;
    right: 0;
    padding: 0 15px 0px 10px;
    background: url(../images/modifyInfo/opacity.png) no-repeat right center;
}
.p:after{
    content: "...";
    position: absolute;
    bottom: 0;
    right: 0;
    padding: 0 15px 0px 10px;
    background: url(../images/modifyInfo/opacity.png) no-repeat right center;
}

2.2 引入插件實現多行省略

通過引入溢出省略插件dotdotdot.js實現多行省略

下載地址： https://github.com/FrDH/jQuery.dotdotdot

引入dotdotdot.js，爲要省略的內容施加方法即可，示例：

$('.p').dotdotdot();

切換內容顯示/隱藏

$(function(){
    //動態展開
    var unReadNum = 0;
    $('.right_newestState_con i').each(function(){
        if($(this).hasClass('curr')){
            unReadNum++;
        }
        $('.right_unreadInfo_p2 i').text(unReadNum);
    });
    $('.right_newestState_con em').each(function(){
        this.flag = true;
        var $this = $(this).parent().next();
        function createDots() {
            $this.dotdotdot();
        }
        function destroyDots() {
            $this.trigger('destroy');
        }
        createDots();
        $(this).on('click',function() {
            if($(this)[0].flag){
                unReadNum--;
                $(this)[0].flag = false;
                $(this).siblings('i').removeClass('curr');
                $('.right_unreadInfo_p2 i').text(unReadNum);
                if(unReadNum==0){
                    $('.body_right_unreadInfo span').remove();
                }
            }
            $this.toggleClass('opend');
            if ($this.hasClass('opend')) {
                $(this).text('[點擊收起]');
                destroyDots();
            } else {
                $(this).text('[點擊展開]');
                createDots();
            }
        });
    })
})

其他使用方法參考官方demo