关于 -webkit-line-clamp 详解
最近需要做个商品列表，在手机屏幕不太一样的市场里，如何做到列表中刚刚好显示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 详解的更多相关文章
- opencv学习笔记——cv::line函数详解
void cvLine( CvArr* img, CvPoint pt1, CvPoint pt2, CvScalar color, int thickness=1, int line_type=8, ...
- kernel command line 参数详解
Linux内核在启动的时候,能接收某些命令行选项或启动时参数.当内核不能识别某些硬件进而不能设置硬件参数或者为了避免内核更改某些参数的值,可以通过这种方式手动将这些参数传递给内核. 如果不使用启动管 ...
- 安装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 ...
- 安装cloudermanager时出现org.spingframework.web.bind.***** host[] is not present at AnnotationMethodHandlerAdapter.java line 738 ****错误（图文详解）（博主推荐）
不多说,直接上干货! 首先,这个问题,写给需要帮助的朋友们,本人在此,搜索资料近半天,才得以解决.看过国内和国外,资料甚少.特此,写此博客,为了弥补此错误解决的资料少的缘故! 问题详解 解决办法 ...
- HTML标签----图文详解
国庆节快乐,还在加班的童鞋,良辰必有重谢! 本文主要内容 头标签 排版标签:<p> <br> <hr> <center> ...
- 详解googe Chrome浏览器（理论篇）
开篇概述 1详解google Chrome浏览器,这个标题似乎抽象了一些,我想应该把它拆分成如下几个问题,也许会更加理解一些. 问题1:目前开发中,主选浏览器有Google Chrome,IE,Fir ...
- 详解google Chrome浏览器（理论篇）
注解:各位读者,经博客园工作人员反馈,hosts涉及违规问题,我暂时屏蔽了最新hosts,若已经获取最新hosts的朋友们,注意保密,不要外传.给大家带来麻烦,对此非常抱歉!!! 开篇概述 1.详解g ...
- 高效开发之SASS篇 灵异留白事件——图片下方无故留白 你会用::before、::after吗 link 与 @import之对比 学习前端前必知的——HTTP协议详解 深入了解——CSS3新增属性 菜鸟进阶——grunt $(#form :input)与$(#form input)的区别
高效开发之SASS篇 作为通往前端大神之路的普通的一只学鸟,最近接触了一样稍微高逼格一点的神器,特与大家分享~ 他是谁? 作为前端开发人员,你肯定对css很熟悉,但是你知道css可以自定义吗?大家 ...
- Java 字符串格式化详解
Java 字符串格式化详解 版权声明:本文为博主原创文章,未经博主允许不得转载. 微博:厉圣杰 文中如有纰漏,欢迎大家留言指出. 在 Java 的 String 类中,可以使用 format() 方法 ...
- Drawable实战解析：Android XML shape 标签使用详解（apk瘦身，减少内存好帮手）
Android XML shape 标签使用详解 一个android开发者肯定懂得使用 xml 定义一个 Drawable,比如定义一个 rect 或者 circle 作为一个 View 的背景. ...
随机推荐
- python中的三元表达式
if B = True: return A else: return C 用三元表达式可以写成: return A if B else C
- #!bin/sh是啥
第一句的#!是对脚本的解释器程序路径,脚本的内容是由解释器解释的,我们可以用各种各样的解释器来写对应的脚本,比如说/bin/csh脚本,/bin/perl脚本,/bin/awk脚本,/bin/sed脚 ...
- IIS-CS0016未能写入文件错误解决方法
使用IIS创建Workbench站点,运行在本地 Workbench主页显示错误,这个提示的错误信息其实是有误导人的,真的打开至c:\Windows\Microsoft.NET\Framework64 ...
- HDU 6333.Problem B. Harvest of Apples-组合数C(n,0)到C(n,m)求和-组合数学(逆元)+莫队 ((2018 Multi-University Training Contest 4 1002))
2018 Multi-University Training Contest 4 6333.Problem B. Harvest of Apples 题意很好懂,就是组合数求和. 官方题解: 我来叨叨 ...
- 第2天-css快速入门
css是什么 css(cascading style sheet,可以译为“层叠样式表”),是一组格式设置规则,用于控制web页面的外观 如何让一个标签具有样式 第一步:必须保证引入方式正确 第二步: ...
- CentOS 7.1 中文正式版下载 - 最流行的免费开源企业级 Linux 服务器操作系统
如果说 Ubuntu 是现今最受桌面用户欢迎的 Linux 操作系统,那么 CentOS 就是最受公司.企业.IDC 喜爱的 Linux 发行版了.得益于极为出色的稳定性,全球范围内无数著名网站均选用 ...
- [USACO06DEC] Milk Patterns
题目描述 Farmer John has noticed that the quality of milk given by his cows varies from day to day. On f ...
- 【推导】【贪心】Codeforces Round #402 (Div. 2) E. Bitwise Formula
按位考虑,每个变量最终的赋值要么是必为0,要么必为1,要么和所选定的数相同,记为2,要么和所选定的数相反,记为3,一共就这四种情况. 可以预处理出来一个真值表,然后从前往后推导出每个变量的赋值. 然后 ...
- 【主席树】bzoj2588 Spoj 10628. Count on a tree
每个点的主席树的root是从其父转移来的.询问的时候用U+V-LCA-FA(LCA)即可. #include<cstdio> #include<algorithm> using ...
- 1.2（java学习笔记）类与对象
对象:是指具体的事物.比如学生 张三,老师 李四,代表一个单一的个体. 比如 学生 张三,这时张三就是具体的对象. 类:将对象中共有特征抽象出,可以理解为某种特性的集合. 世界上的事物可以分解成一 ...