前端知识点

sun_da_zhuang1

已于 2023-02-22 10:35:40 修改

阅读量48

点赞数

文章标签： javascript 前端 html

于 2023-02-22 10:33:27 首次发布

本文链接：https://blog.csdn.net/qq_56855429/article/details/129157371

版权

本文介绍了如何使用CSS解决前端文本溢出的问题，对于单行文本，可以结合`overflow:hidden`，`white-space:nowrap`和`text-overflow:ellipsis`实现省略号效果；对于多行文本，利用`-webkit-line-clamp`和`-webkit-box`等属性也能达到相同目的。

摘要由CSDN通过智能技术生成

工作中遇到的前端知识点

在进行文本渲染时总会遇到文本溢出的情况
单行文本溢出显示省略号解决方法

.info-text{
	width: 200px;
	font-size: 16px;
	overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

多行文本溢出显示省略号解决方法

.info-text{
	overflow: hidden;
	text-overflow: ellipsis;
	width: 200px;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;

}