ie8及其以下版本兼容性问题之文本省略

最新推荐文章于 2022-10-09 08:55:29 发布

YSP易水寒

最新推荐文章于 2022-10-09 08:55:29 发布

阅读量1k

点赞数

分类专栏：浏览器兼容文章标签： ie 8 兼容性

本文链接：https://blog.csdn.net/yishuihan_001/article/details/73576071

版权

浏览器兼容专栏收录该内容

12 篇文章 0 订阅

订阅专栏

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