单行文本省略显示

CSS3有个 text-overflow 属性可以用来实现单行文本溢出的省略显示：

.ellipsis {
	display: block;
	width: 80px;
	white-space: nowrap;
	/* 上面的代码是让文本能够在单行溢出，即能溢出的元素必须是
	有固定宽度的块状或内联块状元素（IE6)，并且强制其不会自动换行*/
	overflow: hidden;
	text-overflow: ellipsis;
	-o-text-overflow: ellipsis;
	/*这一部分代码使溢出的部分隐藏，并且用省略号代替，加上 Opera
	的私有属性可以兼容 Opera 浏览器*/
}

上面的代码在 IE， Chrome， Safari， Opera浏览器中可以正常使用，但是较低版本的 Firefox 不支持 text-overflow，新版本的已经支持了。

要兼容较低版本的 Firefox 需要用到 Firefox 的私有属性 -moz-binding 去调用一个 XML 文件ellipsis.xml (右击另存为)。
调用方式如下：-moz-binding:url('ellipsis.xml#ellipsis');，路径只支持相对路径，且该文件只能放在 css 文件同级或下级目录中。

以下的代码可以完美兼容各主流浏览器：

.ellipsis {
	diaplay: block;
	width: 80px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	-o-text-overflow: ellipsis;
	-moz-binding: url('ellipsis.xml#ellipsis');
}

多行文本省略显示

Webkit 内核浏览器解决方法

这个方式适用于 Webkit 内核浏览器以及移动端（绝大部分移动端浏览器采用 Webkit 内核），主流浏览器中 IE 和 Firefox 不支持。
实现方法如下：

.multiline-ellipsis {
	overflow: hidden;
	display: -webkit-box;
	-webkit-line-orient: vertical;
	-webkit-line-clamp: 2;
	text-overflow: ellipsis;
}

display: -webkit-box; 将元素盒子设置为弹性伸缩盒子
-webkit-line-orient: vertical; 规定子元素的排列方向为垂直
-webkit-line-clamp: 2; 规定显示的行数

跨浏览器解决方案（CSS）

下面是一个老外的解决方法

.block-with-text {
	/*设置文本在超出三行的时候隐藏（1.2 * 3 = 3.6）*/
	position: relative;
	overflow: hidden;
	line-height: 1.2em;
	max-height: 3.6em;
	/*解决每行最后一个单词没有紧贴右边的问题*/
	text-align: justify;
	/*为省略号留下空隙。 使文本在右边界不移动的情况下右 padding 增加 1em，如果不设置 margin，
	文本最右边会向左缩 1em 来增加 padding。 增加 padding，是因为绝对定位的时父元素是padding-box，
	这样就可以将新增加的内容添加到 padding 中，而不与文本重合（与文本重合会造成单词或字母不完整）*/
	margin-right: -1em;
	padding-right: 1em;
}
.block-with-text:before {
	/*为所有需要溢出省略的文本在后面添加省略号*/
	content: "...";
	/*绝对定位是相对于元素框来定位的，而这里的 bottom 指的是隐藏后框的底部，所以这里的伪元素
	会定位到隐藏后框的右下角，而不是加上隐藏部分整体框的右下角*/
	position: absolute;
	right: 0px;
	bottom: 0px;
  /*伪元素默认为内联元素，但是内联元素如果被设置为绝对定位，那么他会表现出块级元素的特征，
  所以这里可以设置其宽高*/
	width: 1em;
	height: 1.2em;
	background: white;
}   
.block-with-text:after {
	content: "";
	/*这里没有设置 bottom，所以伪元素在整体框的右下角，当没有文本被隐藏时，伪元素是显示的，
	有文本被隐藏时，伪元素是隐藏的，利用这一点，可以将没有文本溢出时添加的省略号覆盖掉，有文本
	溢出时，因为此时两个伪元素的位置不一样，所以不会被隐藏*/
	position: absolute;
	right: 0px;
	width: 1em;
	height: 1.2em;
	background: white;
}

需要注意的是，覆盖省略号所用的伪元素背景色应该跟父元素的颜色一致，这就使得父元素的背景必须为纯色。
本文参考：
http://hackingui.com/front-end/a-pure-css-solution-for-multiline-text-truncation/
http://www.zhangxinxu.com/wordpress/2009/09/%E5%85%B3%E4%BA%8E%E6%96%87%E5%AD%97%E5%86%85%E5%AE%B9%E6%BA%A2%E5%87%BA%E7%94%A8%E7%82%B9%E7%82%B9%E7%82%B9-%E7%9C%81%E7%95%A5%E5%8F%B7%E8%A1%A8%E7%A4%BA/