最近需要做个商品列表，在手机屏幕不太一样的市场里，如何做到列表中刚刚好显示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. BZOJ 1207

    1207: [HNOI2004]打鼹鼠 Time Limit: 10 Sec  Memory Limit: 162 MBSubmit: 3089  Solved: 1499[Submit][Statu ...

  2. python gui tkinter用法杂记

    1.treeview遍历 iids = tree.selection() t = tree.get_children() for i in t: print(tree.item(i,'values') ...

  3. 如何php防止XSS攻击

    什么是XSS:这里通俗的讲,就像是SQL注入一样,XSS攻击也可以算是对HTML和JS的一种注入.你本来希望得到是从用户那得到一段有用的文本文字,但用户提交给你的却是别有用心的可执行javascrip ...

  4. Response 部分功能

    设置状态码的方法:    void setStatus(int sc)     void setStatus(int sc, String sm) 设置响应头的方法:    void setHeade ...

  5. css :not 选择器

    :not 选择器是css3里面的 :not([class]){color:red;}  // 没有class属性的元素都设置为红色 p:not([class]){color:red;} // 没有cl ...

  6. Codeforces 811 A. Vladik and Courtesy

    A. Vladik and Courtesy   time limit per test 2 seconds memory limit per test 256 megabytes input sta ...

  7. [BZOJ 2115] Xor

    Link:https://www.lydsy.com/JudgeOnline/problem.php?id=2115 Algorithm: 此题一看到是求异或和最大问题的,立即想到使用线性基解题 最终 ...

  8. 6.5（java学习笔记）其他流（字节数组流,数据流,对象流,打印流）

    一.字节数组流 之前使用输入输出流的操作的对象是文件,而这里字节数组流操作的对象是内存,内存可以看做是一个字节数组. 使用字节数组流读写就可以看做是从内存A到内存B的读写,对象时内存即字节数组. 1. ...

  9. JavaBean的详细及引用

    1.JavaBean实际是具有统一接口格式的java类 2.JavaBean的组成:属性(Properties).方法(Method).事件(Events) 3.一个JavaBean的例子(该例子是用 ...

  10. Scala实战高手****第12课：Scala函数式编程进阶（匿名函数、高阶函数、函数类型推断、Currying）与Spark源码鉴赏

    /** * 函数式编程进阶: * 1.函数和变量一样作为Scala语言的一等公民,函数可以直接赋值给变量 * 2.函数更常用的方式是匿名函数,定义的时候只需要说明输入参数的类型和函数体即可,不需要名称 ...