一、 css

weui-media-box__desc {

    color: #999999;

    font-size: 13px;

    line-height: 1.2;

    overflow: hidden;

    text-overflow: ellipsis;

    display: -webkit-box;

    -webkit-box-orient: vertical;

    -webkit-line-clamp: 2;

}

　二、显示效果

　

三、关键部分：

display: -webkit-box;
-webkit-line-clamp: 2;

四、扩展:display：-webkit-box的用法

1.之前要实现横列的web布局，通常就是float或者display：inline-block; 但是都不能做到真正的流体布局。至少width要自己去算百分比。
2.flexible box 就可以实现真正意义上的流体布局。只要给出相应属性，浏览器会帮我们做额外的计算。

提供的关于盒模型的几个属性：

box-orient           子元素排列 vertical or horizontal
box-flex             兄弟元素之间比例，仅作一个系数
box-align            box 排列
box-direction        box 方向
box-flex-group       以组为单位的流体系数
box-lines
box-ordinal-group    以组为单位的子元素排列方向
box-pack以下是关于flexible box的几个实例
1、三列自适应布局，且有固定margin：

<!DOCTYPE html><html><style>
.wrap {
display: -webkit-box;
-webkit-box-orient: horizontal;
}
.child {
min-height: 200px;
border: 2px solid #666;
-webkit-box-flex: 1;
margin: 10px;
font-size: 100px;
font-weight: bold;
font-family: Georgia;
-webkit-box-align: center;
}
</style><div><div>1</div><div>2</div><div>3</div></div></html>

2、当一列定宽，其余两列分配不同比例亦可(三列布局，一列定宽，其余两列按1：2的比例自适应)：

<!DOCTYPE html><html><meta charset=”utf-8″ /><style>
.wrap {
display: -webkit-box;
-webkit-box-orient: horizontal;
}
.child {
min-height: 200px;
border: 2px solid #666;
margin: 10px;
font-size: 40px;
font-weight: bold;
font-family: Georgia;
-webkit-box-align: center;
}
.w200 {width: 200px}
.flex1 {-webkit-box-flex: 1}
.flex2 {-webkit-box-flex: 2}
</style><div><div>200px</div><div>比例1</div><div>比例2</div></div></html>
3、下面是一个常见的web page 的基本布局：

<!DOCTYPE html><html><meta charset=”utf-8″ /><style>
header, footer, section {
border: 10px solid #333;
font-family: Georgia;
font-size: 40px;
text-align: center;
margin: 10px;
}
#doc {
width: 80%;
min-width: 600px;
height: 100%;
display: -webkit-box;
-webkit-box-orient: vertical;
margin: 0 auto;
}
header,
footer {
min-height: 100px;
-webkit-box-flex: 1;
}
#content {
min-height: 400px;
display: -webkit-box;
-webkit-box-orient: horizontal;
}

.w200 {width: 200px}
.flex1 {-webkit-box-flex: 1}
.flex2 {-webkit-box-flex: 2}
.flex3 {-webkit-box-flex: 3}
</style><div id=”doc”><header>Header</header><div id=”content”><section>定宽200</section><section>比例3</section><section>比例1</section></div><footer>Footer</footer></div></html>

3.了解更多

链接：http://blog.csdn.net/csdn_chenli/article/details/52946143

五、扩展：-webkit-line-clamp的用法

引用：http://www.css88.com/webkit/-webkit-line-clamp/

-webkit-line-clamp 是一个 不规范的属性（unsupported WebKit property），它没有出现在 CSS 规范草案中。

限制在一个块元素显示的文本的行数。 为了实现该效果，它需要组合其他外来的WebKit属性。常见结合属性：

display: -webkit-box; 必须结合的属性 ，将对象作为弹性伸缩盒子模型显示 。

-webkit-box-orient 必须结合的属性 ，设置或检索伸缩盒对象的子元素的排列方式 。

text-overflow，可以用来多行文本的情况下，用省略号“...”隐藏超出范围的文本 。

　　

css3中的display：-webkit-box的用法的更多相关文章

  1. CSS3中的弹性布局——"em"的用法

    使用CSS也好久了,但一直都是在使用“px”来设置Web元素的相关属性,未敢使用“em”.主要原因是,对其并不什么了解,只知道一点概念性的东西,前段时间在项目中要求使用“em”作为单位设置元素,所以从 ...

  2. CSS3中的display:grid网格布局介绍

    1.网格布局(grid): 它将网页划分成一个个网格,可以任意组合不同的网格,做出各种各样的布局; 2.基本概念: 容器和项目,如图所示: <div class="content&qu ...

  3. 3.css3中多个背景图片的用法

    (background-clip裁剪,background-position位置,background-origin定位,background-repeat是否重复) <!DOCTYPE htm ...

  4. CSS中的content和attr的用法

    问题缘起 在闲看别人网站时发现了这样的代码 <span class="hamburger icon" data-icon="C"> .icon:be ...

  5. 浅谈CSS3中display属性的Flex布局

    浅谈CSS3中display属性的Flex布局   最近在学习微信小程序,在设计首页布局的时候,新认识了一种布局方式display:flex 1 .container { 2 display: fle ...

  6. 不可不看！CSS3中三十一种选择器用法

    原文 The 30 CSS Selectors you Must Memorize 由 Jeffrey Way 发表于 2012 年 6 月,介绍了 30 种最常用的 CSS 选择器用法,多加了一种, ...

  7. css3中user-select的用法详解

    css3中user-select的用法详解 user-select属性是css3新增的属性,用于设置用户是否能够选中文本.可用于除替换元素外的所有元素,以下是user-select的主要用法和注意事项 ...

  8. CSS3盒模型display:box详解

    display:box;box-flex是css3新添加的盒子模型属性,它的出现可以解决我们通过N多结构.css实现的布局方式.经典的一个布局应用就是布局的垂直等高.水平均分.按比例划分. 目前box ...

  9. 区别CSS中display：box；inline；none以及HTML中 <frame> 标签<table> 标签的 frame 属性

    区别display:box:display:inline:display:none三者的不同 display:block的特点是: block是Display默认的值.总是在新行上开始:该对象随后的内 ...

随机推荐

  1. Python基础学习六 操作MySQL

    python操作数据库,需要先安装模块 1.下载MySQL.Redis模块 2.解压后,在当前目录执行 python setup.py install 3.或是pycharm直接选择安装 import ...

  2. beijing

    #include<stdio.h> #include<string.h> #include<stdlib.h> #include<graphics.h> ...

  3. hibernate反向生成奇葩错误

    错误场景 最近搞一个hibernate的项目,由于好久不用hibernate了,稍微有点生疏(自从用了ibatis–>mybatis后).这个项目用了hibernate,和ibatis.myba ...

  4. angularJS学习（三）——搭建学习环境

    1.安装Node.js 和Testacular 1.1. 安装Node.js及配置部分,在另一篇博文:node.js的安装里面讲到了,地址是:http://www.cnblogs.com/tianxu ...

  5. Bootstrap 学习资料

    1.Bootstrap中文文档 2.Bootstrap3.1.1 DEMO 3.Bootstrap教程 4.Sco.js--Bootstrap javascript组件的增强版 如果,您认为阅读这篇博 ...

  6. codeforce 459 DIV2 D题

    题意   在一个DAG上面有N个点M条边,每一条边上都有一个小写字母.两个人Max and Lucas 每个人一颗棋子,两个人轮流行棋,当前这一步选择的路上面的字母必须大于等于上一步路上面的字母,当轮 ...

  7. 如何给网页标题栏上添加图标(favicon.ico)（转）

    如何给网页标题栏上添加图标(favicon.ico)   favicon.ico详解:     favicon是Favorites Icon的缩写,favicon.ico是指显示在浏览器收藏夹.地址栏 ...

  8. Luogu 1580 [NOIP2016] 换教室

    先用Floyed做亮点之间的最短路,设计dp,记dp[i][j][0]为到第i节课,换了j次课,当前有没有换课达到的期望耗费体力最小值 方程(太长了还是看代码吧):dp[i][j][0]<-dp ...

  9. Mybatis_映射文件_Select

    一.Select元素来定义查询操作 Id:唯一标识符.用来引用这条SQL语句,需要和接口的方法名一致 parameterType:参数类型.可以不传,MyBatis会根据TypeHandler自动推断 ...

  10. inux内核的编译与安装 （转）

    1.查看ubuntu版本号: xdj@xdj-MS-:~$ sudo lsb_release -a [sudo] password for xdj: No LSB modules are availa ...