文本超出以...显示

lyy2665624982

已于 2022-12-13 16:28:26 修改

阅读量92

点赞数

文章标签： javascript html 前端 html5 web

于 2022-07-21 15:38:34 首次发布

本文链接：https://blog.youkuaiyun.com/m0_56276571/article/details/125913630

版权

本文介绍了CSS中实现文本超出隐藏并显示省略号的技巧，包括`overflow:hidden`、`text-overflow:ellipsis`和`-webkit-line-clamp`属性的使用，适用于限制多行文本的显示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

css样式：

text{

            overflow: hidden;  //  超出隐藏
            text-overflow: ellipsis;  //  省略符号
            display: -webkit-box;  
            -webkit-line-clamp: 1;   // 规定显示多少行
            -webkit-box-orient: vertical; 

}