css实现多行文本溢出显示省略号(…)
WebKit浏览器或移动端的页面
在WebKit浏览器或移动端(绝大部分是WebKit内核的浏览器)的页面实现比较简单,可以直接使用WebKit的CSS扩展属性(WebKit是私有属性)-webkit-line-clamp ;注意:这是一个 不规范的属性(unsupported WebKit property),它没有出现在 CSS 规范草案中。
-webkit-line-clamp用来限制在一个块元素显示的文本的行数。 为了实现该效果,它需要组合其他的WebKit属性。
常见结合属性:
代码如下 | 复制代码 |
display: -webkit-box; 必须结合的属性 ,将对象作为弹性伸缩盒子模型显示 。 -webkit-box-orient 必须结合的属性 ,设置或检索伸缩盒对象的子元素的排列方式 。 text-overflow: ellipsis;,可以用来多行文本的情况下,用省略号“…”隐藏超出范围的文本 。 overflow : hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; |
这个属性比较合适WebKit浏览器或移动端(绝大部分是WebKit内核的)浏览器。
css实现多行文本溢出显示省略号(…)的更多相关文章
- CSS 单行 多行文本溢出显示省略号
单行文本 overflow: hidden; text-overflow:ellipsis; white-space: nowrap; 多行文本溢出显示省略号: <style type=&quo ...
- 布局常见问题之css实现多行文本溢出显示省略号(…)全攻略
省略号在ie中可以使用text-overflow:ellipsis了,但有很多的浏览器都需要固定宽度了,同时ff这些浏览器并不支持text-overflow:ellipsis设置了,下文来给各位整理一 ...
- css实现多行文本溢出显示省略号(…)全攻略
省略号在ie中可以使用text-overflow:ellipsis了,但有很多的浏览器都需要固定宽度了,同时ff这些浏览器并不支持text-overflow:ellipsis设置了,下文来给各位整理一 ...
- CSS实现单行、多行文本溢出显示省略号(…)
如果实现单行文本的溢出显示省略号同学们应该都知道用text-overflow:ellipsis属性来,当然还需要加宽度width属来兼容部分浏览. 实现方法: overflow: hidden; te ...
- CSS和JS实现单行、多行文本溢出显示省略号(该js方法有问题不对)
如果实现单行文本的溢出显示省略号同学们应该都知道用text-overflow:ellipsis属性来,当然还需要加宽度width属来兼容部分浏览. 实现方法: overflow: hidden; te ...
- CSS单行、多行文本溢出显示省略号(……)
这个问题经常遇到 1.单行文本溢出显示省略号(…) text-overflow:ellipsis-----部分浏览器还需要加宽度width属性 overflow:hidden;text-overflo ...
- CSS单行、多行文本溢出显示省略号
如果实现单行文本的溢出显示省略号小伙伴们应该都知道用text-overflow:ellipsis属性来,当然还需要加宽度width属来兼容部分浏览. 实现方法: overflow: hidden; t ...
- CSS单行、多行文本溢出显示省略号(……)解决方案
单行文本溢出显示省略号(-) text-overflow:ellipsis-----部分浏览器还需要加宽度width属性 .ellipsis{ overflow: hidden; text-overf ...
- css多行文本溢出显示省略号(…)
text-overflow:ellipsis属性可以实现单行文本的溢出显示省略号(…).但部分浏览器还需要加宽度width属性. css代码: overflow: hidden; text-overf ...
随机推荐
- vue 常用语法糖
//来自 https://www.cnblogs.com/lhl66/p/8021730.html 侵删 el:element 需要获取的元素,一定是HTML中的根容器元素 data:用于数据的存储 ...
- Python IO编程
IO在计算机中指Input/Output,也就是输入和输出 一.文件读写 1.读文件 >>> f = open('/Users/michael/test.txt', 'r') --- ...
- Linux 环境下 Git 安装与基本配置
索引: 目录索引 参看代码 GitHub: git.txt 一.Linux (DeepinOS) 环境 1.安装 sudo apt-get update sudo apt-get install gi ...
- 20180831-Linux环境下Python 3.6.6 的安装说明
20180831-Linux环境下Python 3.6.6 的安装说明 摘要:Python3 安装部署,普通用户,编译安装 Author: andy_yhm@yeah.net Date: 201808 ...
- 一道CTF题引发的思考——SSI注入
题目地址:http://210.32.4.22/index.php 一开始我一直考虑的用<!--#include file="文件"-->的格式进行读取文件,但是一直不 ...
- PhpStorm 常用插件
PhpStorm 插件 Dash : Dash 需要配合软件 Dash 使用. IdeaVim IdeaVim 对于习惯于使用 Vim 操作方式的人来说是个大福音. IdeaVim 也有默认配置, 可 ...
- Extjs 解决grid分页bug问题
//从后端获取数据加载到grid中var mainStore = new HeJsonStore({ url:'xxx', autoLoad:true, pageSize:20 }) //此方法最好放 ...
- About Pull Strings 英语走后门议论文
About pull strings Author : Pleiades_Antares 1. From ancient times to the present, the "going b ...
- Git的可视化工具SourceTree管理代码 SourceTree的使用
出处:https://blog.csdn.net/android_zhengyongbo/article/details/72885860 其他参考资料https://www.cnblogs.com/ ...
- vue-router query 传对象需要JSON.stringify()转化
先说一下场景-微信公众号网页开发中,一个文章列表点击跳转详情页.代码如下 1 2 3 this.$router.push({path: '/wx/detail', query: {res: data} ...