多行文字溢出显示省略号函数

最新推荐文章于 2023-04-16 22:50:12 发布

lyh_951128

最新推荐文章于 2023-04-16 22:50:12 发布

阅读量504

点赞数

分类专栏： css 文章标签： css 溢出文本省略号

本文链接：https://blog.csdn.net/lyh_951128/article/details/48318237

版权

css 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

单行文字溢出时用省略号代替

1.overflow:hidden;
2.text-overflow:ellipsis;
3.-o-text-overflow:ellipsis;
4.white-space:nowrap;
5.width:100%;

多行文字溢出是显示省略号css

overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;/*你需要的行数*/
-webkit-box-orient: vertical;

多行文字溢出时用省略号代替函数

<span style="font-family: Arial, Helvetica, sans-serif;">//多行文字溢出显示省略号</span>

<span style="font-family: Arial, Helvetica, sans-serif;">//请先引入jquery.js</span>

function figcaption(){
$(".figcaption").each(function(i){
	var divH = $(this).height();
	var chdeq = $(this).children().eq(0);
	var s = chdeq.text().toString();
	var ws =s.length;
	if( parseInt(chdeq.outerHeight()) > parseInt(divH) ){
		for(var i=0; i<ws; i++){
			chdeq.text(s.substring(0,i<4?s.length-i:s.length-4)+'...');
			s = chdeq.text().toString();
			if( parseInt(chdeq.outerHeight()) <= parseInt(divH) ){
				break;
			}
		}
	}
});
}