-webkit-line-clamp,为文本添加行数限制,超过指定行数则隐藏

发布时间:2019-07-18 16:01:37 阅读:98

-webkit-line-clamp属性介绍

-webkit-line-clamp属性规定内容在元素里最多可以显示的行数,该属性仅在与display设置为-webkit-box或属性设置-webkit-inline-box,和-webkit-box-orient属性值为vertical的元素中生效。

在大多数情况下,您还需要为元素设置overflowhidden,否则内容将不会被剪裁,但在指定的行数后仍会显示省略号。

在浏览器中测试后发现,-webkit-line-clamp属性设置为1时会显示2行内容,但是第一行末尾会显示“...”,第二行仍显示,设置为2行时正常。

语法

	p {
    -webkit-line-clamp: 3; //最多3行文本
    -webkit-line-clamp: inherit; //继承父元素属性值
    -webkit-line-clamp: initial; //初始属性值(默认)
    -webkit-line-clamp: unset; //未设置
} 

示例

p {
    width: 300px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
}  

效果

河北乐客互联网络科技成立于2019年,以高端企业网站建设、网站制作、页面设计、SEO优化服务为公司核心业务,同时免费为用户提供模板站下载服务,如何让网站更加符合搜索引擎使网站商业价值最大化是我们的强项与优势。“让客户的客户满意”是我们奉行的核心价值理念。

未设置-webkit-line-clamp属性

未设置-webkit-line-clamp属性

设置了-webkit-line-clamp属性

设置了-webkit-line-clamp属性,且最多行数为5行

兼容性

浏览器 兼容性
Google Chrome 6+ 支持
Microsoft Edge 17+ 支持
Firefox 68+ 支持
Internet Exeplorer 不支持
Opera 15+ 支持
Safari 5+ 支持


我们在微信上24小时期待你的声音
解答:网站优化,网站建设,搜索引擎优化,APP 开发,小程序开发

非常感谢您有耐心的读完这篇文章:"-webkit-line-clamp,为文本添加行数限制,超过指定行数则隐藏",此文章仅为提供更多信息供用户参考使用或为学习交流的方便。如果对您有帮助,请收藏我们的网址:https://www.91webs.cn


18617670560