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