css 文本溢出隐藏处理

最新推荐文章于 2023-11-02 11:26:09 发布

PandaLiXu

最新推荐文章于 2023-11-02 11:26:09 发布

阅读量142

点赞数

文章标签： css 前端 css3

本文链接：https://blog.csdn.net/PandaLiXu/article/details/129808154

版权

css 文本溢出隐藏处理

1. 单行文本溢出

.text-handle {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

2. 多行文本溢出

// 对于兼容性要求比较高的需求，可以使用js来控制溢出的...效果
.text-handle {
	display: -webkit-box;
	// 文本超过次行数时，就会触发溢出隐藏
	-webkit-line-clamp: 行数;
	// 选用的对齐方式（这里用到的是垂直对齐）
    -webkit-box-orient: vertical;
}