CSS 单行/多行文本隐藏

最新推荐文章于 2024-12-13 20:39:58 发布

原创最新推荐文章于 2024-12-13 20:39:58 发布 · 278 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css

博客主要介绍了利用CSS实现单行文本隐藏和多行文本隐藏的相关内容，聚焦于信息技术领域中前端开发的文本样式处理。

<div class="father">
	<span class="child">
		遥襟甫畅，逸兴遄飞。爽籁发而清风生，纤歌凝而白云遏。
		睢园绿竹，气凌彭泽之樽；邺水朱华，光照临川之笔。
		四美具，二难并。穷睇眄于中天，极娱游于暇日。
		天高地迥，觉宇宙之无穷；兴尽悲来，识盈虚之有数。
		望长安于日下，目吴会于云间。地势极而南溟深，天柱高而北辰远。
		关山难越，谁悲失路之人？萍水相逢，尽是他乡之客。
		怀帝阍而不见，奉宣室以何年？
	</span>
</div>

.father {
	width: 200px;
}

在这里插入图片描述
单行文本隐藏

.father {
	width: 200px;
}
.child {
	display: block;  /* 必需 */
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

在这里插入图片描述
多行文本隐藏

.father {
	width: 200px;
}
.child {
	overflow: hidden;
	text-overflow: ellipsis;
	 display: -webkit-box;
	 -webkit-box-orient: vertical;
	 -webkit-line-clamp: 2;       /* 必需 */
}