墨记 CSS处理前端的单行多行截取
6个月前
1421 2
+1
分享 收藏

在写css样式的时候,有时候需要控制标题的行数,简介的行数。当然这个,在我们前端这块也可以做到。以下属性仅支持CSS3,如果你写移动端,那是没有问题的。demo代码如下:

单行截取:

适用范围:PC端与移动端,需要支持css3的浏览器;

 .box{
            width:300px;
            height:100px;
            border:1px solid #ccc;
            /** 截取 **/
             overflow: hidden;
             text-overflow:ellipsis;
             white-space: nowrap;
        }

多行截取:

适用范围:因使用了WebKit的CSS扩展属性,该方法适用于WebKit浏览器及移动端;

.test{
            line-height:150%;
            width:200px;
            max-height:72px;
            border:1px solid #ccc;
            display:-webkit-box;
            -webkit-box-orient:vertical;
            -webkit-line-clamp:3;
            overflow:hidden;
    }

OK,废话不多说,就这么简单,赶紧试试效果吧。

评论 1
写评论
提交
有需要的同学,赶紧的收藏起来吧,作为样式需要,有时候还是很有必要的。
2016-6-30  |  回复 收起回复
确定回复
goldenli998
  • Ta 的墨记:
添加到资源集
+创建资源集
取消
确定
新建资源集 ×
标题:
描述:

返回
创建
用户名不正确!
下次自动登录
×
创建资源集目前仅对内测用户开放,点击获取内测权限。