文字溢出隐藏显示省略号

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)(\.\.\.)?$/, "..."));
	};
});
})

 

特别的，在table中要用溢出省略，需要为table添加

style="table-layout: fixed;"(允许设置列宽,通过th) 默认为 table-layout: automatic 默认每一列列宽均分(不可设置列宽)