css隐藏文本溢出省略

最新推荐文章于 2025-06-24 09:47:52 发布

丰柏林

最新推荐文章于 2025-06-24 09:47:52 发布

阅读量177

点赞数

CC 4.0 BY-SA版权

分类专栏： js前端文章标签： css文本溢出隐藏

本文链接：https://blog.youkuaiyun.com/qq_40647912/article/details/99249806

js前端专栏收录该内容

30 篇文章

订阅专栏

1.单行文本溢出隐藏

<!DOCTYPE html>
<html>
<head>
	<title>单行文本溢出隐藏</title>
	<style type="text/css">
		p{
			white-space: nowrap;
			/*强制文本一行显示*/
			overflow: hidden;
			/*超出元素默认宽度隐藏*/
			text-overflow: ellipsis;
			/*使用省略号代表有内容未显示*/
		}
	</style>
</head>
<body>
	<p>
		单行文本溢出隐藏单行文本溢出隐藏单行文本溢出隐藏单行文本溢出隐藏单行文本溢出隐藏单行文本溢出隐藏单行文本溢出隐藏单行文本溢出隐藏单行文本溢出隐藏单行文本溢出隐藏单行文本溢出隐藏单行文本溢出隐藏单行文本溢出隐藏单行文本溢出隐藏单行文本溢出隐藏单行文本溢出隐藏单行文本溢出隐藏单行文本溢出隐藏单行文本溢出隐藏单行文本溢出隐藏
	</p>
</body>
</html>

2.多行文本溢出隐藏

<!DOCTYPE html>
<html>
<head>
	<title>多行文本溢出隐藏</title>
	<style type="text/css">
		p{
			height: 60px;
			overflow: hidden;
			line-height: 2em;
			border: 1px solid red;
			position: relative;
		}
		p::after{
			content: "...";
			position: absolute;
			right: 0;
			bottom: 0;
			padding: 0px 10px 0px 10px;
			background: #fff;
		}
	</style>
</head>
<body>
	<p>
		多行文本溢出隐藏多行文本溢出隐藏多行文本溢出隐藏多行文本溢出隐藏多行文本溢出隐藏多行文本溢出隐藏多行文本溢出隐藏多行文本溢出隐藏多行文本溢出隐藏多行文本溢出隐藏多行文本溢出隐藏多行文本溢出隐藏多行文本溢出隐藏多行文本溢出隐藏多行文本溢出隐藏多行文本溢出隐藏多行文本溢出隐藏多行文本溢出隐藏多行文本溢出隐藏多行文本溢出隐藏多行文本溢出隐藏多行文本溢出隐藏多行文本溢出隐藏多行文本溢出隐藏多行文本溢出隐藏多行文本溢出隐藏多行文本溢出隐藏多行文本溢出隐藏多行文本溢出隐藏多行文本溢出隐藏多行文本溢出隐藏多行文本溢出隐藏多行文本溢出隐藏多行文本溢出隐藏多行文本溢出隐藏多行文本溢出隐藏多行文本溢出隐藏多行文本溢出隐藏多行文本溢出隐藏多行文本溢出隐藏多行文本溢出隐藏多行文本溢出隐藏多行文本溢出隐藏多行文本溢出隐藏多行文本溢出隐藏多行文本溢出隐藏多行文本溢出隐藏多行文本溢出隐藏多行文本溢出隐藏多行文本溢出隐藏多行文本溢出隐藏多行文本溢出隐藏多行文本溢出隐藏多行文本溢出隐藏多行文本溢出隐藏
	</p>
</body>
</html>