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