css3多行省略号
-webkit-line-clamp
概述：
-webkit-line-clamp 是一个 不规范的属性（unsupported WebKit property），它没有出现在 CSS 规范草案中。
限制在一个块元素显示的文本的行数。 为了实现该效果，它需要组合其他外来的WebKit属性。常见结合属性：
display: -webkit-box;必须结合的属性 ，将对象作为弹性伸缩盒子模型显示 。-webkit-box-orient必须结合的属性 ，设置或检索伸缩盒对象的子元素的排列方式 。- text-overflow，可以用来多行文本的情况下，用省略号“...”隐藏超出范围的文本 。
语法：
取值：
- <number>：
- 块元素显示的文本的行数。
* CSS3新增属性可能存在描述错误及变更，仅供参考，持续更新
兼容性：
| 支持版本\类型 | IE | Firefox | Safari | Chrome | Opera |
|---|---|---|---|---|---|
| 桌面 | no | no | yes | yes | yes(webkit) |
| 移动端 | no | no | yes | yes | ? |
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
</head> <body>
<p style="
overflow : hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
">
static：对象遵循常规流。top，right，bottom，left等属性不会被应用。 relative： 对象遵循常规流，并且参照自身在常规流中的位置通过top，right，bottom，left属性进行偏移时不影响常规流中的任何元素。 absolute：对象脱离常规流，使用top，right，bottom，left等属性进行绝对定位，盒子的偏移位置不影响常规流中的任何元素，其margin不与其他任何margin折叠。fixed：对象脱离常规流，使用top，right，bottom，left等属性以窗口为参考点进行定位，当出现滚动条时，对象不会随着滚动。center：对象脱离常规流，使用top，right，bottom，left等属性指定盒子的位置或尺寸大小。盒子在其包含容器垂直水平居中。盒子的偏移位置不影响常规流中的任何元素，其margin不与其他任何margin折叠。（CSS3）page：盒子的位置计算参照absolute。盒子在分页媒体或者区域块内，盒子的包含块始终是初始包含块，否则取决于每个absolute模式。（CSS3） sticky： 对象在常态时遵循常规流。它就像是 relative 和 fixed 的合体，当在屏幕中时按常规流排版，当卷动到屏幕外时则表现如fixed。该属性的表现是现实中你见到的吸附效果。（CSS3）* CSS3新增属性可能存在描述错误及变更，仅供参考，持续更新
</p>
</body>
</html>
css3多行省略号的更多相关文章
- 如何设置文本不换行省略号显示等CSS常用文本属性
如何让多余的文本省略号显示首先要说几个属性的作用: whitespace:nowrap 中文行末不断行显示 overflow: 控制超出文本的显示方式:hidden 超出范围文本隐藏:scroll 始 ...
- CSS超出2行省略号
overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; line- ...
- 文本超出显示省略号/数字英文字母折行有关css 属性/显示两行，第二行省略号显示css方法
文本超出显示省略号: 定容器宽度 overflow: hidden; text-overflow: ellipsis; 文本超出显示省略号 white-space:nowrap; 强制文本不换行 折 ...
- css 断行省略号，隐藏，fixed定位
text-overflow(clip | elipsis)(显示省略号| 不显示省略号) white-space:nowrap 强制文字不断行 word-break:break-all; ...
- css 多行省略号兼容移动端
浏览器兼容css样式 -webkit-line-clamp: ; display: -webkit-box; overflow: hidden; text-overflow: ellipsis; te ...
- css实现单行和多行省略号
1.单行省略 { width:300px; overflow: hidden; text-overflow:ellipsis; whitewhite-space: nowrap; } 注:单行省略必须 ...
- 文本多行省略号（CSS最优方案）
Float定位溢出隐藏 优点: 纯CSS实现,性能好,不用js调优 兼容性高 多行省略,自动显示 缺点: 单词截断 代码如下: <div class="ellipses-div&quo ...
- css 文字超出俩行省略号显示
.center-titles{ overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: ...
- api日常总结：前端常用js函数和CSS常用技巧
我的移动端media html{font-size:10px} @media screen and (min-width:321px) and (max-width:375px){html{font- ...
随机推荐
- 如何实例化i2c_client（四法）
一.在板文件进行client的实例化 在内核的初始化中(例如在板文件中)定义设备的信息.这种操作的前提是内核编译的时候已经确定有哪些i2c设备和它们的地址,还要知道连接的总线的编号. 比如在板文件/a ...
- 使用PHPmailer发送邮件的详细代码
一.使用PHPMailer发送邮件的原因 PHP有内置的mail()方法,但是由于一些主机空间不支持该方法,所以经常会遇到无法发送邮件的情况. 所以,可以下载PHPMailer类,实现邮件发送. 二. ...
- 从零开始学C++之数据封装与抽象：分别用C和C++来实现一个链栈
下面通过分别用C和C++来实现一个链栈(链表实现),从中体会数据封装抽象的思想: C语言实现: C++ Code 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 ...
- leetcode第一刷_Triangle
非常easy的一道DP,看到空间限制是O(N)的,不要习惯性的以为是要保存每一行的最小值,不难想到是要保存一行其中各个数为路径终点时的和的大小.当算到最后一行时,就是从顶部究竟部以这个底部位置为终点的 ...
- Director Scene Layer and Sprite
Scenes Director Layers Multiple Layers Example: Sprites References Scenes A scene (implemented with ...
- oracle口令管理之允许某个用户最多尝试三次登录
如果一个用户连续三次登录失败,则锁定该用户两天,两天之后该用户才能重新登录. 创建profile文件: 更新账户: 三次登录失败后用户就会被锁定: 用户锁住之后要怎么给他解锁: 解锁之后就可以正常登录 ...
- Linux下载jdk ，Linux如何下载jdk
Linux下载jdk Linux如何下载jdk >>>>>>>>>>>>>>>>>>> ...
- bootstrap学习和使用的经验总结
第一肯定是下载 然后就是目录介绍,因为bootstrap是个轻量级的框架,目录不是很多,所以很容易理解,主要有用的就是三个文件,bootstrap.js,bootstrap.css,bootstrap ...
- java的真相
所谓编译,就是把源代码“翻译”成目标代码——大多数是指机器代码——的过程.针对Java,它的目标代码不是本地机器代码,而是虚拟机代码. 编译原理里面有一个很重要的内容是编译器优化.所谓编译器优化是指, ...
- css标准导航代码
<!-- 例子解析: --> --> <!-- list-style-type:none - 移除列表前小标志.一个导航栏并不需要列表标记 --> <!-- 移除浏 ...