文字溢出隐藏显示省略号

css实现单行溢出隐藏

css代码

/*
溢出隐藏
*/
overflow: hidden;
/*
显示省略号
*/
text-overflow: ellipsis;
/*
不换行
*/
white-space: nowrap;

js实现多行溢出隐藏

jsp页面

<dd class="user_star_dd"><p>你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好

你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好

</p></dd>

css代码

overflow: hidden;
height: 30px;

js代码

$(function(){
// 文字隐藏
	$(".user_star_dd").each(
			function(i) {
				var divH = $(this).height();
				var $p = $("p", $(this));
				while ($p.outerHeight() > divH) {
					$p.text($p.text().replace(
							/(s)*([a-zA-Z0-9]+|W)(...)?$/, "..."));
	};
});
})

阅读更多