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- ...
随机推荐
- 第十一章、认识与学习 BASH Bash Shell 的操作环境
bash中的变量动不动就说环境变量,真是奇怪,bash只是一个c语言编写的程序而已,跟环境变量有什么关系?如果知道dos的历史的话就知道有个时代是只有命令行界面而没有图形用户界面,这只小小的程序就包揽 ...
- Linux安装Team Service Agent
(1)下载linux agent文件(在windows中下载后,通过WinSCP复制至linux服务器中) 或者可以在linux直接下载文件(直接下载不会因为网络问题而导致传输中断) 首先使用命令建立 ...
- Android开发_Android数据的四种存储方式
Android系统一共提供了四种数据存储方式.分别是:SharePreference.SQLite.Content Provider和File.由于Android系统中,数据基本都是私有的的,都是存放 ...
- JAVA向文件中追加内容(转)
向文件尾加入内容有多种方法,常见的方法有两种: RandomAccessFile类可以实现随机访问文件的功能,可以以读写方式打开文件夹的输出流 public void seek(long pos)可以 ...
- android 62 手机存储目录的划分
android下应用程序的路径和javase不同,应用程序的数据要保存自己的文件夹里面 > > getFileDir(); 获取自己的文件夹 /data/data/包名(应用程序的名字)/ ...
- IO负载高的来源定位 IO系列
http://elf8848.iteye.com/category/281637 前言: 在一般运维工作中经常会遇到这么一个场景,服务器的IO负载很高(iostat中的util),但是无法快速的定位到 ...
- gdb调试运行时的程序小技巧
使用gdb调试运行时的程序小技巧 标签: 未分类 gdb pstack | 发表时间:2012-10-15 04:32 | 作者:士豪 分享到: 出处:http://rdc.taobao.com/bl ...
- 鸟哥的Linux私房菜学习笔记(1)
2014/10/29 1.档案的权限管理分为三个部分: 拥有者.群组.其他 2.ls -al 命令可以看到档案的详细信息 3.档案的属性中由十个部分构成 第一个部分是档案类型 -代表档案.d代表文件夹 ...
- Android（java）学习笔记194：ListView编写步骤（重点）
1.ListView在我们的手机android编写程序中使用是十分广泛的,比如如下图中 短信 和 手机设置 都是ListView的效果: 手机设置: 短信: 2.正因为这 ...
- CentOS7上Nginx的使用
Nginx 的启动 指定配置文件的方式启动nginx # nginx -c /etc/nginx/nginx.conf 对于yum安装的nginx,使用systemctl命令启动 # systemct ...