最近需要做个商品列表，在手机屏幕不太一样的市场里，如何做到列表中刚刚好显示2行，偶然间发现淘宝的手机版有用到-webkit-line-clamp来实现这种效果

限制在一个块元素显示的文本的行数。

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

为了实现该效果，它需要组合其他外来的WebKit属性。常见结合属性：

  • display: -webkit-box; 必须结合的属性 ，将对象作为弹性伸缩盒子模型显示 。
  • -webkit-box-orient 必须结合的属性 ，设置或检索伸缩盒对象的子元素的排列方式 。
  • text-overflow，可以用来多行文本的情况下，用省略号“...”隐藏超出范围的文本 。

适用场景：适合于这种商品列表或者新闻列表的展示

兼容性：

demo：

<!doctype html>

<html lang="en">

<head>

	<meta charset="UTF-8" />

	<title>测试</title>

	<style type="text/css">

		*{

		 padding: 0px;

		 margin: 0px;

		}

		.box{

			width: 220px;

		    background: #eee;

		    position: relative;

		    overflow: hidden;

		    min-height: 80px;

		    padding: 10px 10px 10px 100px;

		}

		.box img{

			width: 80px;height: 80px;

			position: absolute;

			left: 10px;

			top: 10px;

		}

		.box h3{

		    display: -webkit-box;

		    -webkit-line-clamp: 2;

		    -webkit-box-orient: vertical;

		    overflow: hidden;

			font-size: 14px;

			line-height: 20px;

		}

		.box span{

			font-size: 14px;

			color: #f00;

			line-height: 30px;

		}

	</style>

</head>

<body>

	<div class="box">

		<img src="http://120.25.174.99:668/attachment/mall/product/201605031628.jpg" alt="" />

		<h3>大号高款陶瓷花盆带托盘桌面花盆中国风梅兰竹菊花盆陶瓷竹菊花盆陶瓷竹菊花盆陶瓷</h3>

		<span>$230</span>

	</div>

</body>

</html>

　　

关于 -webkit-line-clamp 详解的更多相关文章

  1. opencv学习笔记——cv::line函数详解

    void cvLine( CvArr* img, CvPoint pt1, CvPoint pt2, CvScalar color, int thickness=1, int line_type=8, ...

  2. kernel command line 参数详解

    Linux内核在启动的时候,能接收某些命令行选项或启动时参数.当内核不能识别某些硬件进而不能设置硬件参数或者为了避免内核更改某些参数的值,可以通过这种方式手动将这些参数传递给内核.  如果不使用启动管 ...

  3. 安装Phoenix时./sqlline.py执行报错File "./sqlline.py", line 27, in <module> import argparse ImportError: No module named argparse解决办法（图文详解）

    不多说,直接上干货! 前期博客 Apache版Phoenix的安装(图文详解) 问题现象 Traceback (most recent call last): File , in <module ...

  4. 安装cloudermanager时出现org.spingframework.web.bind.***** host[] is not present at AnnotationMethodHandlerAdapter.java line 738 ****错误（图文详解）（博主推荐）

    不多说,直接上干货! 首先,这个问题,写给需要帮助的朋友们,本人在此,搜索资料近半天,才得以解决.看过国内和国外,资料甚少.特此,写此博客,为了弥补此错误解决的资料少的缘故! 问题详解  解决办法   ...

  5. HTML标签----图文详解

    国庆节快乐,还在加班的童鞋,良辰必有重谢! 本文主要内容 头标签 排版标签:<p>     <br>     <hr>     <center>     ...

  6. 详解googe Chrome浏览器（理论篇）

    开篇概述 1详解google Chrome浏览器,这个标题似乎抽象了一些,我想应该把它拆分成如下几个问题,也许会更加理解一些. 问题1:目前开发中,主选浏览器有Google Chrome,IE,Fir ...

  7. 详解google Chrome浏览器（理论篇）

    注解:各位读者,经博客园工作人员反馈,hosts涉及违规问题,我暂时屏蔽了最新hosts,若已经获取最新hosts的朋友们,注意保密,不要外传.给大家带来麻烦,对此非常抱歉!!! 开篇概述 1.详解g ...

  8. 高效开发之SASS篇 灵异留白事件——图片下方无故留白 你会用::before、::after吗 link 与 @import之对比 学习前端前必知的——HTTP协议详解 深入了解——CSS3新增属性 菜鸟进阶——grunt $(#form :input)与$(#form input)的区别

    高效开发之SASS篇   作为通往前端大神之路的普通的一只学鸟,最近接触了一样稍微高逼格一点的神器,特与大家分享~ 他是谁? 作为前端开发人员,你肯定对css很熟悉,但是你知道css可以自定义吗?大家 ...

  9. Java 字符串格式化详解

    Java 字符串格式化详解 版权声明:本文为博主原创文章,未经博主允许不得转载. 微博:厉圣杰 文中如有纰漏,欢迎大家留言指出. 在 Java 的 String 类中,可以使用 format() 方法 ...

  10. Drawable实战解析：Android XML shape 标签使用详解（apk瘦身，减少内存好帮手）

    Android XML shape 标签使用详解   一个android开发者肯定懂得使用 xml 定义一个 Drawable,比如定义一个 rect 或者 circle 作为一个 View 的背景. ...

随机推荐

  1. 《Java编程思想》笔记 第四章 控制执行流程

    1.true和false if--else if--else, while, do--while 都使用条件表达式的真假来决定执行路径. Java不允许数字作为真假判断,C和C++可以非0即真. 2. ...

  2. linux awk学习笔记

    awk学习笔记 awk语法格式 awk '{pattern + action}' {filenames} awk作用 awk的最基本功能是在文件或者字符串中基于指定规则浏览和抽取信息,awk抽取信息后 ...

  3. unity学习笔记1--Space Shooter

    其实我一直觉得我是个模棱两可的人,就计算机这块来说,自己还是想制作游戏什么的,但是又得考虑到现实就业的问题,所以现在自己主要在学安卓和javaweb.现在大概是心血来潮吧,突然想追逐下自己的理想,虽然 ...

  4. 杀掉TOMCAT并重启的脚本

    /usr/local/tomcat7/bin/shutdown.sh sleep #具体时间就看你得webapp在调用shutdown.sh后多久后处于僵死状态 ps -ef | grep sleep ...

  5. Windows和Ubuntu平台Android +JAVA 环境搭建

    NOTE 测试的时候,尤其是移动端的测试,需要搭建JAVA和Andriod环境: appium和macaca都需要这两个环境: Q&A Macaca doctor 发现没有platforms这 ...

  6. hadoop学习一：hadoop安装(hadoop2.4.1,ubuntu14.04）

    1.创建用户 adduser hduser 修改hduser用户权限: sudo vim /ect/sudoers ,在文件中增加 hduser  ALL=(ALL:ALL) ALL .

  7. 使用selenium模拟知网登录

    之前都是用phantomjs和selenium模拟浏览器动作的,后来phantomjs不再更新,就转用chrome了 本次模拟登录的网站是中国知网http://login.cnki.net/login ...

  8. 区间DP【p4290】[HAOI2008]玩具取名

    Description 某人有一套玩具,并想法给玩具命名.首先他选择WING四个字母中的任意一个字母作为玩具的基本名字.然后他会根据自己的喜好,将名字中任意一个字母用"WING"中 ...

  9. Jenkins集成SonarQube

    sonar安装配置 准备软件包 安装 mysql5.6+ 创建数据库sonar,字符集编码utf8 新建用户如heboan 因为sonarqube不能使用root用户运行 调整系统参数,/etc/se ...

  10. ntp流量放大攻击分析

    最近,听说挂在网络上的设备进行时间同步成功率低,YS需要架设自己的NTP服务器,这玩意第一时间能让人想到NTP流量放大攻击,这也是一种比较古老的攻击方式,检测了一下发现所使用的OS默认已经进行了加固, ...