单行文本溢出and多行文本溢出...以省略号展现

一.单行文本溢出

包裹文字的盒子css代码如下：

overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;/*多余的文字省略号展示*/

实例：

<p class="test" style="width:200px;overflow: hidden;line-height: 2em;white-space: nowrap;text-overflow: ellipsis;">
连续的空白符会被合并，换行符会被当作空白符来处理。填充line盒子时，必要的话会换行。连续的空白符会被并，换行符会被当作空白符来处理。填充line盒子时，必要的话会换行。
</p>

二.多行文本溢出

包裹文字的盒子css代码如下：

display: -webkit-box!important;
overflow: hidden;

text-overflow: ellipsis;
word-break: break-all;

-webkit-box-orient:vertical;
-webkit-line-clamp:4; /*这里控制在哪一行开始出现省略号*/

三.方法2不能兼容ie，用如下js方法可以兼容ie

1.引入2.0以下的JQ，目的是兼容至ie8，这个方法的兼容性取决于所引入的jq兼容性。

HTML

<div class="figcaption">
<p>额的额的的额的的额的的额的的额额的额的的额的的额的的额的的额的的额的的额的的额的的的额的额的的额的的额的的额的的额的的额的的额的的额的的的额的额的的额的的额的的额的的额的的额的的额的的额的的的额的额的的额的的额的的额的的额的的额的的额的的额的的的额的额的的额的的额的的额的的额的的额的的额的的额的的的额的额的的额的的额的的额的的额的的额的的额的的额的的的额的额的的额的的额的的额的的额的的额的的额的的额的的的额的额的的额的的额的的额的的额的的额的的额的的额的的的的的额的的额的的额的的的</p>
</div>

CSS:

.figcaption {
height: 4.5em;
}

.figcaption p {
line-height: 1.5em;
}

末尾加入js

//		多行文本省略...显示开始
$(".figcaption").each(function(i) {
var divH = $(this).height();
var $p = $("p", $(this)).eq(0);
while($p.outerHeight() > divH) {
$p.text($p.text().replace(/(\s)*([a-zA-Z0-9]+|\W)(\.\.\.)?$/, "..."));
};
});
//			多行文本省略...结束

四..jQuery插件-jQuery.dotdotdot

1.HTML

<div class="figcaption">
<p>额的额的的额的的额的的额的的额额的额的的额的的额的的额的的额的的额的的额的的额的的的额的额的的额的的额的的额的的额的的额的的额的的额的的的额的额的的额的的额的的额的的额的的额的的额的的额的的的额的额的的额的的额的的额的的额的的额的的额的的额的的的额的额的的额的的额的的额的的额的的额的的额的的额的的的额的额的的额的的额的的额的的额的的额的的额的的额的的的额的额的的额的的额的的额的的额的的额的的额的的额的的的额的额的的额的的额的的额的的额的的额的的额的的额的的的的的额的的额的的额的的的</p>
</div>

2.CSS

.figcaption {
height: 4.5em;
}

.figcaption p {
line-height: 1.5em;
}

3.引入JQ2.0以下版本

4.引入jquery.dotdotdot.min.js 下载地址:http://dotdotdot.frebsite.nl/

5.底部加入

<script type="text/javascript">
$(document).ready(function() {
$(".figcaption").dotdotdot({
watch: "window"
});
});
</script>