多行文本溢出时用省略号表示溢出内容

当文本只有一行时，其溢出部分用省略号表示很简单，可以直接使用css样式控制。

p{
	text-overflow:ellipsis;
	overflow:hidden;
	white-space:nowrap;
}

但多行文本溢出时用省略号表示却没有现成的样式了，网上提供了一种方式，用省略号插入溢出的位置，覆盖掉尾部内容，但是这种方式治标不治本。它也是通过css来控制显示的，下面先看一下网上给出的方式。

#intorduce{
    position:relative;
    line-height:1.4em;
    height:16.2em;
    overflow:hidden;
}
#intorduce:after {
    content:'...';
    font-weight:bold;
    position:absolute;
    bottom:0;
    right:0;
    padding:0 20px 1px 45px;
    background:url(../image/ellipsis.png) repeat-y;
}

效果：

它的背景图片是一个淡入式处理的白色图片，在文本溢出是看着还可以，高度的设定可以根据自己调试，保证内容最后一行显示完全。但是当文本未溢出时，最后的省略号也是存在的。并且该方式受浏览器限制。在谷歌上的显示如上。其他浏览器我没具体测试，但网上有人测试过，给了评论。

下面介绍一种我自己写的方法，该方法是通过js来控制的故而能兼容所有浏览器，其原理是：当文本溢出时，文本框的高度会大于你默认的限制高度，那么每次截取一行文字删掉，直到不出界的时候，添加省略号。具体如下：

//多行文本溢出处理
var height = $("#intorduce").height();//获取初始文本框高度
if(height>240){//当文本框高度大于默认高度时，证明文本已溢出
	while(height>240){//240是默认的文本框高度
		var text = $("#intorduce").text();
		var textLength = text.length;
		text = text.substring(0,textLength-48);//48是一行48个字符，每次删除一行
		$("#intorduce").text(text);
		height = $("#intorduce").height();
	}
	text = $("#intorduce").text().substring(0,text.length-10);
	$("#intorduce").text(text);
	$("#intorduce").append('<strong>......</strong><a class="deail" href="#">【详细】</a>');
}

css样式：

.deail{
	float:right;
}

效果图：