CSS实现多行文本溢出显示省略号_css多行文本超出部分省略号代替-优快云博客

本文链接：https://blog.youkuaiyun.com/kongjunchao159/article/details/52840890

单行文本溢出显示省略号，可以直接使用

text-overflow:ellipsis; white-space:nowrap;

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title></title>
	<style>
		*{margin: 0; padding: 0;}
		div{width: 200px; height: 40px; line-height: 20px; border: 1px solid red; margin-top: 100px; margin-left: 100px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
	</style>
</head>
<body>
	<div>
	哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈
	</div>
</body>
</html>

多行文本溢出显示省略号

方案一使用webkit属性-webkit-line-clamp（注意这是一个不规范的属性）

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title></title>
	<style>
		*{margin: 0; padding: 0;}
		div{width: 200px; height: 40px; line-height: 20px; border: 1px solid red; margin-top: 100px; margin-left: 100px; overflow: hidden; display: -webkit-box; text-overflow: ellipsis; -webkit-line-clamp: 2; -webkit-box-orient: vertical;}
	</style>
</head>
<body>
	<div>
	哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈
	</div>
</body>
</html>

方案二通过::after伪类添加省略号（兼容性较好）

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title></title>
	<style>
		*{margin: 0; padding: 0;}
		div{width: 200px; height: 40px; line-height: 20px; border: 1px solid red; margin-top: 100px; margin-left: 100px; overflow: hidden; position: relative;}
		div::after{content: '...'; position: absolute; right: 0; bottom: 0; background-color: #FFF;}
	</style>
</head>
<body>
	<div>
	哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈
	</div>
</body>
</html>