text-overflow: ellipsis；单行，多行文本溢出显示 . . .

最新推荐文章于 2024-04-26 09:18:36 发布

前端小狮

最新推荐文章于 2024-04-26 09:18:36 发布

阅读量3.2w

点赞数 20

分类专栏： css 文章标签： css text-overflow

本文链接：https://blog.csdn.net/m0_37885651/article/details/79896850

版权

css 专栏收录该内容

17 篇文章 0 订阅

订阅专栏

常见的单行文本溢出显示省略号写法：text-overflow: ellipsis;overflow: hidden;white-space: nowrap;

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<style type="text/css">
		.p{
			width: 100px;
			height: 40px;
			line-height: 40px;
			text-overflow: ellipsis;
			overflow: hidden;
			white-space: nowrap;
  			word-break: break-all;
		}
	</style>
	<body>
		<p class="p">多行文本溢出显示多行文本溢出显示多行文本溢出显示</p>
	</body>
</html>

text-overflow: ellipsis;多行文本溢出就无法满足,so,
WebKit浏览器有一个-webkit-line-clamp的属性，用这个即可以实现webkit内核的浏览器、以及大部分移动端的多行文本溢出省略号；

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<style type="text/css">
		.p {
			height: 60px;
			line-height: 30px;
			width: 80px;
		    overflow : hidden;
		    text-overflow: ellipsis;
		    display: -webkit-box;
		    -webkit-line-clamp: 2;
		    -webkit-box-orient: vertical;
		}
	</style>
	<body>
		<p class="p">多行文本溢出显示多行文本溢出显示多行文本溢出显示多行文本溢出显示多示</p>
	</body>
</html>

其它浏览器的话就需要通过js实现：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<style type="text/css">
		div{
			height: 60px;
		}
		p {
			line-height: 30px;
			width: 80px;
		    margin: 0 auto;
		}
	</style>
	<body>
		<div id="div">
			<p id="p">多行文本溢出显示多行文本溢出显示多行文本溢行文本溢示</p>
		</div>
	</body>
	<script type="text/javascript">
			var eleH = document.getElementById("div").clientHeight;

	        var pEle = document.getElementById("p");
	
	        while(pEle.clientHeight > eleH) {
	
	            pEle.innerText = pEle.innerText.replace(/(\s)*([a-zA-Z0-9]+|\W)(\.\.\.)?$/, "...");
	
	        };
	</script>
</html>

前端小狮

关注

20
点赞
踩
35

收藏

觉得还不错? 一键收藏
1
评论
text-overflow: ellipsis；单行，多行文本溢出显示 . . .

常见的单行文本溢出显示省略号写法：text-overflow: ellipsis;overflow: hidden;white-space: nowrap;&lt;!DOCTYPE html&gt;&lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8" /&gt; &lt;title&gt;&lt;/ti..
复制链接

扫一扫