利用css实现文本的单行溢出省略和多行溢出省略 发布时间:2025/01/21 如何利用css实现文本的单行溢出省略和多行溢出省略,下面编程教程网小编给大家详细介绍一下具体实现代码! 单行溢出省略 div { width:300px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } 复制代码 多行溢出省略 //按照行数省略 div { width:300px; display:-webkit-box; text-overflow:ellipsis; -webkit-line-clamp:2; /*控制行数*/ /*! autoprefixer: ignore next */ -webkit-box-orient: vertical; overflow: hidden; } //按高度省略 div { position: relative; width:300px; max-height: 40px; overflow: hidden; line-height: 20px; } div::after { content: '...'; position: absolute; right: 0; bottom: 0; } 复制代码 以上是编程学习网小编为您介绍的“利用css实现文本的单行溢出省略和多行溢出省略”的全面内容,想了解更多关于 前端知识 内容,请继续关注编程基础学习网。