温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

css中line-clamp属性指的是什么

发布时间:2020-08-31 11:10:08 来源:亿速云 阅读:961 作者:小新 栏目:web开发

这篇文章主要介绍css中line-clamp属性指的是什么,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!

首先我们来了解一下line-clamp属性是什么?

line-clamp属性可以限制在一个块元素显示的文本的行数,为了实现该效果,它需要组合其他外来的WebKit属性,添加-WebKit-前缀。

line-clamp属性是一个 不规范的属性(unsupported WebKit property),它没有出现在 CSS规范草案中,是一个正在编辑的草案。所以这就意味着line-clamp属性不是一成不变的,因为它是一项正在进行中的工作。line-clamp属性的定义可以分为max-lines和block-overflow,其中前者有被丢弃的风险。【推荐视频学习:css3教程】

很容易看出max-lines是如何被禁用的,因为line-clamp的功能(在截断之前设置行数)已经被实现,在让它进一步的截断是不必要的。这会让我们偏离轨道,所以让我们继续前进吧。

接下来看看line-clamp属性是如何使用?

基本语法

.module {
  line-clamp: [none | <integer>];
}

line-clamp 在当前规范的草案中可以接受以下值:

none:在行数上没有设置最大值,因此不会发生截断。

<integer>:设置截断内容之前的最大行数,然后在最后一行的末尾显示省略号(...)。

该省略号应呈现为Unicode字符(U + 2026),但可以由基于所使用的用户代理的内容语言和写入模式的等效项替换。

那么就有人会问了,我们不可以使用text-overflow属性(文字溢出)来实现文字的截取吗?

text-overflow确实有一个会截断文本的值:ellipsis,我们来看看效果

css代码:

.truncate {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

css中line-clamp属性指的是什么

可以看出,text-overflow是可以实现文字的截取,但是,它是在第一行引入省略号;如果我们想在某处截取文字,比如第三行文本呢?

这时就是line-clamp发挥作用的地方了。

css中line-clamp属性指的是什么

下面我们来看看line-clamp属性的兼容性

css中line-clamp属性指的是什么

对于无法支持的浏览器,我们可以使用JavaScript来实现效果。

css中line-clamp属性指的是什么

以上是css中line-clamp属性指的是什么的所有内容,感谢各位的阅读!希望分享的内容对大家有帮助,更多相关知识,欢迎关注亿速云行业资讯频道!

向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

AI