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

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

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

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

demo.html

<div class="li_title">得力/deli LED灯立体浮雕地球仪/标准教学 高清中英文对照 内显洋流图行政图地形图 送放大镜( Φ 30cm)</div>

demo.css

.shop .li_title{
width:100%;
font-size:16px;
line-height:20px;
height: 40px;
margin-bottom:40px;
overflow: hidden;
display: -webkit-box;
text-overflow: ellipsis;
-webkit-line-clamp:;
-webkit-box-orient: vertical;
}

效果图

多行文本溢出显示...的方法(-webkit-line-clamp)的更多相关文章

  1. css自动省略号...,通过css实现单行、多行文本溢出显示省略号

    网页开发过程中经常会遇到需要把多行文字溢出显示省略号,这篇文章将总结通过多种方法实现文本末尾省略号显示. 一.单行文本溢出显示省略号(…) 省略号在ie中可以使用text-overflow:ellip ...

  2. CSS单行、多行文本溢出显示省略号(……)

    这个问题经常遇到 1.单行文本溢出显示省略号(…) text-overflow:ellipsis-----部分浏览器还需要加宽度width属性 overflow:hidden;text-overflo ...

  3. css实现单行、多行文本溢出显示省略号(…)

    一.单行文本溢出显示省略号(…) 省略号在ie中可以使用text-overflow:ellipsis了,但有很多的浏览器都需要固定宽度了,同时ff这些浏览器并不支持text-overflow:elli ...

  4. CSS和JS实现单行、多行文本溢出显示省略号(该js方法有问题不对)

    如果实现单行文本的溢出显示省略号同学们应该都知道用text-overflow:ellipsis属性来,当然还需要加宽度width属来兼容部分浏览. 实现方法: overflow: hidden; te ...

  5. css实现单行,多行文本溢出显示省略号……

    1.单行文本溢出显示省略号我们可以直接用text-overflow: ellipsis 实现方法: <style> .div_text{width: 300px; padding:10px ...

  6. CSS实现单行、多行文本溢出显示省略号(…)

    如果实现单行文本的溢出显示省略号同学们应该都知道用text-overflow:ellipsis属性来,当然还需要加宽度width属来兼容部分浏览. 实现方法: overflow: hidden; te ...

  7. 布局常见问题之css实现多行文本溢出显示省略号(…)全攻略

    省略号在ie中可以使用text-overflow:ellipsis了,但有很多的浏览器都需要固定宽度了,同时ff这些浏览器并不支持text-overflow:ellipsis设置了,下文来给各位整理一 ...

  8. css实现多行文本溢出显示省略号(…)全攻略

    省略号在ie中可以使用text-overflow:ellipsis了,但有很多的浏览器都需要固定宽度了,同时ff这些浏览器并不支持text-overflow:ellipsis设置了,下文来给各位整理一 ...

  9. CSS单行、多行文本溢出显示省略号

    如果实现单行文本的溢出显示省略号小伙伴们应该都知道用text-overflow:ellipsis属性来,当然还需要加宽度width属来兼容部分浏览. 实现方法: overflow: hidden; t ...

随机推荐

  1. inceptionnet

    inception发展历程 v1 mlp多层感知器层 上面两个观看孔径,尺寸不一样,可以抽取不同分辨率,不同尺度的邻域范围的信息作为特征,这样就可以观察到输入数据的不同层次,不同分辨率的特征 因为这个 ...

  2. [HAOI2007][SDOI2005]反素数

    题目:洛谷P1463.BZOJ1053.Vijos P1172.codevs2912. 题目大意:对于任何正整数x,其约数的个数记作g(x).例如g(1)=1.g(6)=4. 如果某个正整数x满足:g ...

  3. 常见bug分析

    变量类型不匹配,形参和实参类型不匹配,隐式类型转换,变量类型赋值不匹配, 工具不熟悉,导致逻辑错误,查看代码,测试驱动开发,完整的测试用例,覆盖所有分支, 变量超出范围,对于大的数据要特别注意, 工具 ...

  4. iptables指南

    在了解iptables之前我们先了解一下 防火墙 的概念防火墙是由Check Point创立者Gil Shwed于1993年发明并引入国际互联网,防火墙也是一种位于内部网络与外部网络之间的网络安全系统 ...

  5. 20180929 北京大学 人工智能实践:Tensorflow笔记01

    北京大学 人工智能实践:Tensorflow笔记 https://www.bilibili.com/video/av22530538/?p=13 (完)

  6. P3649 [APIO2014]回文串(回文树)

    题目描述 给你一个由小写拉丁字母组成的字符串 ss .我们定义 ss 的一个子串的存在值为这个子串在 ss 中出现的次数乘以这个子串的长度. 对于给你的这个字符串 ss ,求所有回文子串中的最大存在值 ...

  7. XML和Schema命名空间详解

    来源:https://blog.csdn.net/wanghuan203/article/details/9204337 XML和Schema具有无关平台,技术厂商,简单,规范统一等特点,极具开放性, ...

  8. ADL & 实参相依的查找 & 成员与非成员的查找

    也就是会根据实参,所处在的名字空间,来查找对应名字空间里面的函数. 对于<<也是常见的场景,会根据实际要打印出来的下一个操作数,来决定调用哪个命名空间里面的函数. 注意,不同命名空间里面的 ...

  9. 如何调试Blink?

    内容 尽管有很多工具和技巧可用于调试Blink,这个文章的重点调试Blink除布局測试之外的feature. 1 介绍 2 Linux 2.1 入门 2.2 启动Debugger 3 实用的工具 3. ...

  10. shrio 授权

    授权,也叫访问控制,即在应用中控制谁能访问哪些资源(如访问页面/编辑数据/页面操作等).在授权中需了解的几个关键对象:主体(Subject).资源(Resource).权限(Permission).角 ...