HTML常用表单—超过两行自动省略，变成...

最新推荐文章于 2023-12-05 14:16:17 发布

原创最新推荐文章于 2023-12-05 14:16:17 发布 · 370 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#html

HTML 专栏收录该内容

1 篇文章

订阅专栏

本文介绍了一种使用CSS样式来优雅地处理文本溢出的方法，通过限制元素内的文本行数并在文本被截断时显示省略号。这种方法适用于需要在有限空间内展示大量文本的场景，如列表视图或卡片布局。

在这里插入图片描述

.twoRow {
		overflow: hidden;          //超出隐藏
		text-overflow: ellipsis;  //显示省略符号来代表被修剪的文本。
		display: -webkit-box; 
		-webkit-line-clamp: 2;           //两行
		-webkit-box-orient: vertical;  //在水平行中从左向右排列子元素。
	}