web中文本折叠

web中文本折叠

一、单行文本折叠

所用代码

/*强制文本不换行*/
				white-space: nowrap;
				/*超出部分隐藏**/
				overflow: hidden;
				/*超出部分显示省略号*/
				text-overflow: ellipsis;

运行代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			.r{
				/*强制文本不换行*/
				white-space: nowrap;
				/*超出部分隐藏**/
				overflow: hidden;
				/*超出部分显示省略号*/
				text-overflow: ellipsis;
				background-color: red;
				}
		</style>
		
	</head>
	<body>
		<p class="r">2、“你微微地笑着，不同我说什么话。而我觉得，为了这个，我已等待得很久了。”——泰戈尔，适用于爱情情感类写作,“你微微地笑着，不同我说什么话。而我觉得，为了这个，我已等待得很久了。”——泰戈尔，适用于爱情情感类写作“你微微地笑着，不同我说什么话。而我觉得，为了这个，我已等待得很久了。”——泰戈尔，适用于爱情情感类写作</p>
	</body>
</html>

效果图

局部截取_20260506_165939

多行文本折叠

所用代码

/*多行折行指定行数*/
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 2;
				/*超出部分隐藏**/
				overflow: hidden;
				/*超出部分显示省略号*/
				text-overflow: ellipsis;

运行代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			.r{
				/*多行折行指定行数*/
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 2;
				/*超出部分隐藏**/
				overflow: hidden;
				/*超出部分显示省略号*/
				text-overflow: ellipsis;
			}
		</style>
	</head>
	<body>
		<p class="r">2、“你微微地笑着，不同我说什么话。而我觉得，为了这个，我已等待得很久了。”——泰戈尔，适用于爱情情感类写作,“你微微地笑着，不同我说什么话。而我觉得，为了这个，我已等待得很久了。”——泰戈尔，适用于爱情情感类写作“你微微地笑着，不同我说什么话。而我觉得，为了这个，我已等待得很久了。”——泰戈尔，适用于爱情情感类写作</p>
	</body>
</html>

效果图

局部截取_20260506_170312

posted @ 2026-05-07 08:37  寐式  阅读(10)  评论(0)    收藏  举报