CSS中 设置( 单行、多行 )超出显示省略号
1. 设置超出显示省略号
css设置超出显示省略号可分两种情况:
- 单行文本溢出显示省略号…
- 多行文本溢出显示省略号…
但使用的核心代码是一样的:需要先使用 “overflow:hidden;” 来把超出的部分隐藏,然后使用“text-overflow:ellipsis;”当文本超出时显示为省略号。
- overflow:hidden; 不显示超过对象尺寸的内容,就是把超出的部分隐藏了;
- text-overflow:ellipsis; 当文本对象溢出是显示…,当然也可是设置属性为 clip 不显示点点点;
单行文本溢出显示省略号
<div class="wrap"><div class="content">测试数据:css单行文本超出长度显示省略号--明天也要努力</div><div class="content text-ellipsis">测试数据:css单行文本超出长度显示省略号--明天也要努力</div>
</div><style>
.wrap{width: 200px;height: 200px;
}
.content{width: 100%;margin-top: 6px;
}
.text-ellipsis{overflow:hidden;white-space: nowrap;text-overflow: ellipsis;-o-text-overflow:ellipsis;
}
</style>
多行文本溢出显示省略号
思路:
1、使用 overflow:hidden; 语句不显示超过对象尺寸的内容,就是把超出的部分隐藏了;
2、使用 -webkit-line-clamp: 行数; 语句限制显示文本的行数;
3、使用 text-overflow:ellipsis; 语句用省略号“…”隐藏超出范围的文本
<div class="wrap"><div class="content">测试数据:css多行文本超出长度显示省略号,多行文本超出长度显示省略号--明天也要努力</div><hr><div class="content text-ellipsis">测试数据:css多行文本超出长度显示省略号,多行文本超出长度显示省略号--明天也要努力</div>
</div><style>
.wrap{width: 200px;height: 300px;
}
.content{width: 100%;
}
.text-ellipsis{overflow:hidden;text-overflow: ellipsis;-webkit-line-clamp: 3;display: -webkit-box;-webkit-box-orient: vertical;
}
</style>
说明: 移动端浏览器绝大部分是 WebKit 内核的,所以该方法适用于移动端;
- -webkit-line-clamp 用来限制在一个块元素显示的文本的行数,这是一个不规范的属性(unsupported WebKit property),它没有出现在 CSS 规范草案中;
- display: -webkit-box 将对象作为弹性伸缩盒子模型显示 ;
- -webkit-box-orient 设置或检索伸缩盒对象的子元素的排列方式 ;
2. 关于 -webkit-line-clamp 属性拓展
-webkit-line-clamp 可以把块容器中的内容限制为指定的行数,它只有在 display 属性设置成 -webkit-box 或 -webkit-inline-box 并且 -webkit-box-orient 属性设置成 vertical 时才有效果。
在大部分情况下,也需要设置 overflow 属性为 hidden, 否则,里面的内容不会被裁减,并且在内容显示为指定行数后还会显示省略号 (ellipsis )。
当他应用于锚 (anchor) 元素时,截取动作可以发生在文本中间,而不必在末尾。
备注: 此属性在 WebKit 中已经实现,但有一些问题。他是旧标准的一种支持。CSS Overflow Module Level 3 规范还定义了一个 line-clamp 属性,用来代替此属性且避免一些问题。
语法:
/* Keyword value */
-webkit-line-clamp: none;/* <integer> values */
-webkit-line-clamp: 3;
-webkit-line-clamp: 10;/* Global values */
-webkit-line-clamp: inherit;
-webkit-line-clamp: initial;
-webkit-line-clamp: unset;none:这个值表明内容显示不会被限制。
integer:这个值表明内容显示了多少行之后会被限制。必须大于 0.
CSS中 设置( 单行、多行 )超出显示省略号相关推荐
- css实现第二行超出显示省略号
css实现第二行超出显示省略号 需求: 实现单行文本超出省略: width: 295px;//设置宽度white-space: nowrap;//不要换行overflow: hidden;text-o ...
- css 一行超出显示省略号 多行超出显示省略号
一行超出显示省略号 .word{width: 200px;white-space: nowrap;text-overflow: ellipsis;overflow: hidden; } white-s ...
- html文字单行以及多行超出显示省略号
html文字单行以及多行超出显示省略号 在前端页面中,许多时候需要用到文字超出显示省略号的情况,今天在github上看见一片总结得特别全的文章,列出一下两种较好的方法. 原文链接:https://gi ...
- html不换行溢出省略号代替,css怎么设置强制不换行溢出显示省略号?
css可以使用white-space:nowrap;样式使元素内文本不换行,然后使用text-overflow:ellipsis;样式设置元素内文本超出显示省略号. css设置强制不换行溢出显示省略号 ...
- css实现单行、多行超出显示省略号兼容火狐
css 单行,超出部分显示省略号 p{overflow:hidden;//超出部分隐藏text-overflow:ellipsis;//超出部分显示省略号white-space:nowarp;//不允 ...
- Html中文字过多,单行超出和多行超出显示省略号
单行: <!--单行--> <p class="pl">这个属性定义溢出元素内容区的内容会如何处理.如果值为 hidden,当点击hidden时,滚动机制关 ...
- Vue文本内容单行或多行超出显示省略号判断,超出显示tooltip提示
开发中经常遇到需要超出文本省略的需求,通常情况下只需要设置css的样式即可实现: text-overflow: ellipsis;overflow: hidden;white-space: nowra ...
- css 超出显示省略号
单行超出显示省略号 .box{overflow: hidden;text-overflow: ellipsis;white-space: nowrap;width: 100px;} 多行超出显示省略号 ...
- html 超出显示出来,html超出显示省略号
文本超出显示省略号/数字英文字母折行有关css 属性/显示两行,第二行省略号显示css方法 文本超出显示省略号: 定容器宽度 overflow: hidden; text-overflow: elli ...
最新文章
- 可疑文件_如何识别文件的真假
- 复星金服微服务_阿里巴巴财报:蚂蚁金服净利润59亿元,支付宝服务用户约12亿...
- File Explore 中data权限修改,实体机
- 手撕FSG2.0壳(有坑点)
- idea配置tomcat必坑指南
- 2017.4.17------软件测试的艺术+整理以前的摘记
- Android编程中dp、px和sp的区别
- 国外游戏开发商吐槽:开发VR游戏付账单的钱都赚不到
- native层 安卓_安卓逆向学习入门之过反调试(一)
- python冒泡排序算法详解_Python 3.0冒泡排序算法示例源码
- 把代码写成艺术,真正体会面向对象编程思想
- php代码审计工具+seay,代码审计利器-Seay源代码审计系统
- [12-22]XP系统城市更新[www.xp366.com]
- 大数据与云计算 | 华科软院2020年期末考试试题及答案
- python 找零问题 动态规划
- java 链表 置为null_Java: 链表head取出用后,置next=null为何可以加速gc?
- 按位运算符与逻辑运算符的区别
- 利用qwinsta和rwinsta察看连接到一个机器的连接数
- 非标自动化设备涉及的行业有哪些?
- Hash-based Shuffle内幕彻底解密