首页 前端知识 CSS让元素内容超出两行用省略号隐藏

CSS让元素内容超出两行用省略号隐藏

2024-08-22 23:08:45 前端知识 前端哥 268 673 我要收藏

要让一个元素的内容在超出两行时用省略号隐藏,可以使用CSS的 text-overflowoverflowwhite-space 和 display 属性,同时还需要使用 -webkit-line-clamp 和 display: -webkit-box (这两个属性主要用于WebKit浏览器,如Chrome和Safari)。

.text {  
    display: -webkit-box;  
    -webkit-line-clamp: 2; /* 限制为两行 */  
    -webkit-box-orient: vertical;  
    overflow: hidden; /* 隐藏超出部分 */  
    text-overflow: ellipsis; /* 超出部分用省略号表示 */  
    white-space: normal; /* 允许换行 */  
    /* 你可能还想设置一些其他样式,比如宽度、字体大小等 */  
}

请注意,-webkit-line-clamp 和相关的WebKit属性不是标准的CSS属性,尽管它们在大多数现代浏览器中都得到了支持。如果你需要更广泛的浏览器兼容性,可能需要使用JavaScript或jQuery插件来实现相同的效果。

转载请注明出处或者链接地址:https://www.qianduange.cn//article/16588.html
标签
评论
发布的文章

【Jquery】jquery的简单使用

2024-09-01 00:09:11

NodeJs使用jQuery中$Ajax

2024-09-01 00:09:45

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!