css 多行文字超出变省略号

keyuzhang

于 2019-04-17 13:33:57 发布

阅读量353

点赞数 1

CC 4.0 BY-SA版权

分类专栏： HTML+CSS

本文链接：https://blog.youkuaiyun.com/keyuzhang/article/details/89354284

HTML+CSS 专栏收录该内容

2 篇文章

订阅专栏

本文介绍如何使用CSS实现文本溢出时的省略效果，通过限制显示的行数和隐藏超出的内容，保持布局整洁。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html>
<head>
	<title>	</title>
	<meta charset="utf-8">
	<style type="text/css">
	.brief-box {
		width:200px;
	}
	.brief-word {
		width:70%;
		padding-right:36px;
		display:-webkit-box;
		-webkit-box-orient:vertical;
		/*省略第几行之后的内容*/
		-webkit-line-clamp:2;
		overflow:hidden;
	}

	</style>
</head>
<body>
<div class="brief-box">
    <p class="brief-word">
        详细说明简介详细说明简介详细说明简介详细说明
    </p>
</div>
</body>
</html>