CSS3 块级元素,文本溢出操作 -webkit-line-clamp
2016-04-29 14:39
369 查看
大家经常用的css3属性text-overflow是针对单行文本溢出的操作,那块级元素的文本溢出要怎样处理呢?
需要用到-webkit-line-clamp:
限制在一个块元素显示的文本的行数。
-webkit-line-clamp 是一个 不规范的属性(unsupported WebKit property),它没有出现在 CSS 规范草案中。
为了实现该效果,它需要组合其他外来的WebKit属性。常见结合属性:
display: -webkit-box; 必须结合的属性 ,将对象作为弹性伸缩盒子模型显示 。
-webkit-box-orient 必须结合的属性 ,设置或检索伸缩盒对象的子元素的排列方式 。
text-overflow,可以用来多行文本的情况下,用省略号“...”隐藏超出范围的文本 。
-webkit-line-clamp:<number>
默认值: ? ?表示不清楚;
适用于:块元素
继承性:无
动画性:否
计算值:指定的值
<number>:块元素显示的文本的行数。
* CSS3新增属性可能存在描述错误及变更,仅供参考,持续更新
?表示不清楚
对应的firefox可以使用
iOS 2.0及更高版本的Safari浏览器可用
Android尚不明确
需要用到-webkit-line-clamp:
说明:
限制在一个块元素显示的文本的行数。-webkit-line-clamp 是一个 不规范的属性(unsupported WebKit property),它没有出现在 CSS 规范草案中。
为了实现该效果,它需要组合其他外来的WebKit属性。常见结合属性:
display: -webkit-box; 必须结合的属性 ,将对象作为弹性伸缩盒子模型显示 。
-webkit-box-orient 必须结合的属性 ,设置或检索伸缩盒对象的子元素的排列方式 。
text-overflow,可以用来多行文本的情况下,用省略号“...”隐藏超出范围的文本 。
语法:
-webkit-line-clamp:<number>默认值: ? ?表示不清楚;
适用于:块元素
继承性:无
动画性:否
计算值:指定的值
取值:
<number>:块元素显示的文本的行数。* CSS3新增属性可能存在描述错误及变更,仅供参考,持续更新
兼容性:
支持版本\类型 | IE | Firefox | Safari | Chrome | Opera |
---|---|---|---|---|---|
桌面 | no | no | yes | yes | yes(webkit) |
移动端 | no | no | yes | yes | ? |
对应的firefox可以使用
-moz-appearance属性
iOS 2.0及更高版本的Safari浏览器可用
Android尚不明确
注:文章出处 http://www.css88.com/book/css/webkit/text/line-clamp.htm
相关文章推荐
- css3 box-orient box-pack box-align
- CSS多列布局
- CSS垂直居中精华总结
- CSS-标准盒模型 & 怪异盒模型
- css sprites 图片精灵自动生成 插件
- CSS实现镂空遮罩引导层
- CSS3基础第三篇(布局相关,媒体查询,用户界面)
- CSS的margin塌陷(collapse)
- CSS颜色
- css img标签高度等于宽度.
- css类与伪类 .class:link{}
- 你们有关注过HTML标签的默认样式和浏览器默认样式吗?
- 160427、CSS3实战笔记--多列布局
- css3标签学习总结文章
- 如何创建 CSS
- CSS 属性选择器
- CSS 类选择器
- CSS id 选择器
- CSS 派生选择器
- CSS 语法