文本多行最后一行溢出隐藏显示省略号

最新推荐文章于 2024-03-25 17:13:25 发布

熊叁(san)

最新推荐文章于 2024-03-25 17:13:25 发布

阅读量2.2k

点赞数 1

分类专栏：前端笔记

本文链接：https://blog.csdn.net/littlebearGreat/article/details/75093114

版权

前端笔记专栏收录该内容

126 篇文章 2 订阅

订阅专栏

有时候，需要一段文字，最后一行溢出隐藏显示省略号，这时候css已经不行了（我没找到方法）。

在网上略查了一下，大致思路是这样的：

把一段文字一个一个的放进p标签中，监测换行，达到我们需要的行数以后，把文本截断，最后添加省略号。

然后，就自己写了段简单的js，实现了这个效果。

效果是这样的：

下面是代码

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>多行省略</title>
	<style>
		div{
			width: 200px;
			border: 1px solid #333;
		}
		p{
			font-size: 16px;
			line-height: 30px;
			padding: 0;
			margin: 0;
			white-space: pre-line;
			overflow: hidden;
			text-overflow: ellipsis;
		}
	</style>
	<script src="jquery.min.js"></script>
</head>
<body>
	<div>
		<p class="p">今天的天气咋样今天的天气咋样今天的天气咋样今天的天气咋样今天的天气咋样今天的天气咋样今天的天气咋样</p>
	</div>

<script>
	$(function(){
		function fierceEllipsis(className,n){
			var span = $(className);
			var txt = span.text();
			span.text('');
			var minH = span.height();
			var m = 0;
			for (var i = 1; i < txt.length+1; i++) {
				var t = txt.substring(0,i);
				span.text(t);
				var nowH = span.height();
				if (nowH != minH && m < n) {
					minH = nowH;
					m++;
				}else if (nowH != minH && m >= n) {
					t = txt.substring(0,i-2) + ' ...';
					span.text(t);
					break;
				}
			}
		}

		fierceEllipsis('.p',2);

		/**
		 *使用方法：
		 * 1. 依赖于jQuery，可以自己改成原生的
		 * 2. 调用函数fierceEllipsis(className,n)
		 * 3. 传入两个值：
		 *				第一个值：要设置标签的class名（支持标签：p、span，，，，其它的自己去测试）
		 *				第二个值：该标签下一共要显示的行数，数字格式
		 * 4. 每设置一处地方就要调用一次 fierceEllipsis函数，
		 *    为什么这样做？因为有可能所有要设置的地方要显示的行数不都是一样的
		 */
	})
</script>
</body>
</html>