多行文本最后行末尾省略号显示

最新推荐文章于 2022-07-25 19:13:36 发布

飞扬_柳絮

最新推荐文章于 2022-07-25 19:13:36 发布

阅读量1.1k

点赞数

分类专栏： Css

本文链接：https://blog.csdn.net/tjcjava/article/details/78016594

版权

Css 专栏收录该内容

17 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>xdlines-demo</title>
		<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
		<style type="text/css">
			/*第1种方式: CSS样式,只适用于webkit内核的移动端*/
			.ellipsis {
              display: -webkit-box;/*必须结合的属性,将对象作为弹性伸缩盒子模型显示*/
              -webkit-box-orient: vertical;/* 必须结合的属性 ，设置或检索伸缩盒对象的子元素的排列方式*/
              -webkit-line-clamp: 2;
              overflow: hidden;
              text-overflow: ellipsis;
              word-break: break-all;
              width: 300px;
              color: red;
              font-size:24px;
            }
            /*第2种方式: CSS样式需要放在body之前*/
            .el{width: 300px;margin:60px 0; font-size:34px;}
		</style>
	</head>
	<body>
		<p class="ellipsis">
			这是一段测试文字,可以通过更改传入对象的max属性来改变最终的显示行数，超出部分会以省略号显示。
		</p>
		<p class="el">
			这是一段测试文字,可以通过更改传入对象的max属性来改变最终的显示行数，超出部分会以省略号显示。
		</p>
		<p class="el">
			这是一段测试文字,可以通过更改传入对象的max属性来改变最终的显示行数，超出部分会以省略号显示。
		</p>
		<script type="text/javascript">
	    (function($) {
        	$.fn.xdlines = function(options) {
        		var opts = $.extend({}, $.fn.xdlines.defaults, options);
        		var $this = $(this);
        		for(var k = 0; k < $this.length; k++) {
        			var $obj = $this.eq(k);
        			$obj.css({ wordWrap: 'break-word' })
        			var str = $obj.text();
        			str = str.replace(/(^\s*)|(\s*$)/g, "");
        			var l = str.length;
        			var txt = '';
        			var lineHeight; //单行高度
        			var linesNum = opts.max; //需要的行数
        			for(var i in str) {
        				txt += str[i];
        				$obj.text(txt);
        				var nowh = parseInt($obj.css('height')); //当前高度
        				if(i == 0) {
        					lineHeight = nowh * linesNum;
        				}
        				if(nowh > lineHeight) {
        					var txt = txt.substring(0, txt.length - 3) + "...";
        					$obj.text(txt);
        					break;
        				}
        			}
        		}
        	};
    
        	$.fn.xdlines.defaults = { max: 1 }
        })(jQuery)
        $('.el').xdlines({max:2});
	</script>
	</body>
</html>

飞扬_柳絮

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
多行文本最后行末尾省略号显示

<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>xdlines-demo</title> <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script> <style ty
复制链接

扫一扫