css 文本两行显示,超出省略号表示
重点:text-overflow: ellipsis;只对display:inline;起作用
例子:
a{
display:block/inline-block;
width:100px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
b{
display:inline; //正确
display:inline-block //错误,b标签里的字超出不能显示省略号(…)
}
//一行
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
word-break: break-all;
//两行
text-overflow: -o-ellipsis-lastline;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
line-clamp: 2;
-webkit-box-orient: vertical;
如果实现单行文本的溢出显示省略号同学们应该都知道用text-overflow:ellipsis属性来,当然还需要加宽度width属来兼容部分浏览。
实现方法:
overflow: hidden;
text-overflow:ellipsis;
white-space: nowrap;
效果如图:
但是这个属性只支持单行文本的溢出显示省略号,如果我们要实现多行文本溢出显示省略号呢。
接下来重点说一说多行文本溢出显示省略号,如下。
实现方法:
display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 3;
overflow: hidden;
效果如图:
适用范围:
因使用了WebKit的CSS扩展属性,该方法适用于WebKit浏览器及移动端;
注:
-webkit-line-clamp用来限制在一个块元素显示的文本的行数。 为了实现该效果,它需要组合其他的WebKit属性。常见结合属性:
display: -webkit-box; 必须结合的属性 ,将对象作为弹性伸缩盒子模型显示 。
-webkit-box-orient 必须结合的属性 ,设置或检索伸缩盒对象的子元素的排列方式 。
实现方法:
p{position: relative; line-height: 20px; max-height: 40px;overflow: hidden;}
p::after{content: “…”; position: absolute; bottom: 0; right: 0; padding-left: 40px;
background: -webkit-linear-gradient(left, transparent, #fff 55%);
background: -o-linear-gradient(right, transparent, #fff 55%);
background: -moz-linear-gradient(right, transparent, #fff 55%);
background: linear-gradient(to right, transparent, #fff 55%);}
效果如图:
适用范围:
该方法适用范围广,但文字未超出行的情况下也会出现省略号,可结合js优化该方法。
注:
将height设置为line-height的整数倍,防止超出的文字露出。
给p::after添加渐变背景可避免文字只显示一半。
由于ie6-7不显示content内容,所以要添加标签兼容ie6-7(如:…);兼容ie8需要将::after替换成:after。
css 文本两行显示,超出省略号表示相关推荐
- css - 文本两行显示,超出省略号表示
重点:text-overflow: ellipsis;只对display:inline:起作用 如果实现单行文本的溢出显示省略号同学们应该都知道用 text-overflow:ellipsis 属性来 ...
- CSS图片居中显示 超出div容器高度度隐藏 css3 object-fit
CSS图片居中显示 超出div容器高度度隐藏 图片高度低于div容器高度上下不留白显示 通过固定容器的宽高加上flex布局结合css3的属性object-fit实现 .el-image{width: ...
- css设置不显示超出内容_显示...,css设置内容超出后显示省略号
1.使用overflow: hidden把超出的内容进行隐藏: 2.然后使用white-space: nowrap设置内容不换行: 3.最后使用text-overflow: ellipsis设置超出内 ...
- css overflow 省略号,图文详解CSS文本溢出显示省略号效果(text-overflow)
在工作中经常会遇到文本溢出,需要显示省略号的情况,那这个省略号是怎么实现的呢?这篇文章就给大家讲讲CSS中如何用text-overflow实现超出部分显示省略号.对CSS文字溢出加省略号这个知识不熟悉 ...
- CSS文本溢出显示省略号怎么实现?
前言 我们经常会遇到网页中有文字溢出会显示省略号,那么这种效果怎么实现呢?本文分别介绍了单行文本溢出显示省略号和多行文本溢出显示省略号的实现方法. 一.单行文本溢出显示省略号 代码示例: <!D ...
- css文本溢出显示省略号
1.单行文本溢出显示省略号 overflow: hidden;(文字长度超出限定宽度,则隐藏超出的内容) white-space: nowrap;(设置文字在一行显示,不能换行) text-overf ...
- CSS 文字两行显示,超出隐藏
// 两行显示,超出隐藏 display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clam ...
- css文本换行以及出现省略号简单处理
1. 使用word-wrap:break-word 不生效的情况: 1. 对行元素不生效;2. 代码里有默认设置的不换行;3. 由于粘贴复制的英文段落,导致文字换行不生效,有时候是文字被切割,于是 删 ...
- css 文本只显示两行,超出部分用省略号表示
代码块如下: overflow: hidden;overflow-wrap: break-word;text-overflow: ellipsis;display: -webkit-box;-webk ...
最新文章
- 资源 | 100+个自然语言处理数据集大放送,再不愁找不到数据!
- vue中computed和methods区别
- 【正一专栏】中国足球不是你想不玩就不玩的
- 打造高效的工作环境 – SHELL 篇
- boost::fruchterman_reingold_force_directed_layout用法的测试程序
- Angular 下的 function
- Jupyter notebook 导出PDF的3种方法
- 丰收互联蓝牙key怎么开机_ublox收购Rigado的蓝牙模块业务,扩大蓝牙低功耗产品组合...
- python教程很详细_Python编程入门教程:从入门到高级,非常详细
- 吴钩:打开宋代的“隐藏玩法”
- (2/2)Canvas的交互存为图片-爬坑篇
- 使用jquery简化ajax开发
- 【FastReport教程】如何使用RichObject属性将文件导出为文本格式
- Atitit algo art算法的艺术 attilax 著 va v67.docxAtitit 算法的艺术 attilax 1. 模型 文本 音视频 图像 32. 文本方面的编码算法 3
- 新高考计算机学业水平考试,新高考对学业水平测试的要求
- 使用打印方法将caj、pdz转pdf格式
- 【kali技巧】kali更新系统
- 二工大计算机专业,两电一邮与哈工大:计算机专业哪所实力最强?看完就知道...
- KITTI下使用SGBM立体匹配算法获得深度图
- fliebeat+kafka ELK日志分析平台实战