after不显示_web前端入门到实战:css实现单行、多行文本超出显示省略号

6ad7a8c852c2cc5eda2330a3943ec527.png
前言:项目中我们经常遇到这种需求,需要对单行、多行文本超出显示为省略号。这篇文章主要总结了小编解决此问题的方法,有不足之处欢迎大家指正。

单行文本省略

80144bce4d42319c93593f935d9f0ed4.png
.ellipsis-line {border: 1px solid #f70505;padding: 8px;width: 400px;overflow: hidden;text-overflow: ellipsis; //文本溢出显示省略号white-space: nowrap; //文本不会换行
}

语法:

text-overflow:clip/ellipsis;
默认值:clip
适用于:所有元素
clip: 当对象内文本溢出时不显示省略标记(...),而是将溢出的部分裁切掉。
ellipsis: 当对象内文本溢出时显示省略标记(...)。

在使用的时候,有时候发现不会出现省略标记效果,经过测试发现,使用ellipsis的时候,必须配合overflow:hidden; white-space:nowrap; width:具体值;这三个样式共同使用才会有效果。

多行文本省略

直接用css属性-webkit-line-clamp:n;设置

在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;,可以用来多行文本的情况下,用省略号“…”隐藏超出范围的文本。

这个属性只合适WebKit浏览器或移动端(绝大部分是WebKit内核的)浏览器

.multi-line {border: 1px solid #f70505;width: 400px;overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 3;-webkit-box-orient: vertical;
}

效果如图所示:

d237478c826cc19dee31871fa951054e.gif

从效果上来看,它的优点有:

1.响应式截断,根据不同宽度做出调整
2.文本超出范围才显示省略号,否则不显示省略号
3.浏览器原生实现,所以省略号位置显示刚好

但是缺点也是很直接,因为 -webkit-line-clamp 是一个不规范的属性,它没有出现在 CSS 规范草案中。也就是说只有 webkit 内核的浏览器才支持这个属性,像 Firefox, IE 浏览器统统都不支持这个属性,浏览器兼容性不好。

使用场景:多用于移动端页面,因为移动设备浏览器更多是基于 webkit 内核,除了兼容性不好,实现截断的效果不错。

利用定位和伪类元素

p{position: relative; width:400px;line-height: 20px; max-height: 60px;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%);
}

效果如图:

1ce01fc4e4e3d4155137295b981a0f72.gif

适合场景:文字内容较多,确定文字内容一定会超过容器的,那么选择这种方式不错。但文字未超出行的情况下也会出现省略号,可结合js优化该方法。
注:

  • 将height设置为line-height的整数倍,防止超出的文字露出。
  • 给p::after添加渐变背景可避免文字只显示一半。
  • 由于ie6-7不显示content内容,所以要添加标签兼容ie6-7(如:<span>…<span/>);兼容ie8需要将::after替换成:after。

结合js优化代码

css:

 p {position: relative;width: 400px;line-height: 20px;overflow: hidden;}
.p-after:after{content: "..."; position: absolute; bottom: 0; right: 0; padding-left: 40px;background: -webkit-linear-gradient(left, transparent, #fff 55%);background: -moz-linear-gradient(left, transparent, #fff 55%);background: -o-linear-gradient(left, transparent, #fff 55%);background: linear-gradient(to right, transparent, #fff 55%);
}

js:

$(function(){//获取文本的行高,并获取文本的高度,假设我们规定的行数是五行,那么对超过行数的部分进行限制高度,并加上省略号$('p').each(function(i, obj){var lineHeight = parseInt($(this).css("line-height"));var height = parseInt($(this).height());if((height / lineHeight) >3 ){$(this).addClass("p-after")$(this).css("height","60px");}else{$(this).removeClass("p-after");}});
})

运用第三方插件或者自己写脚本控制

网上有很多介绍关于使用JavaScript实现多行文本溢出省略的办法,有的使用插件,有的使用自己封装好的JavaScript文件,但是,我认为,还是自己写的js比较好用。

//div
<div class="box">北京时间11月18日,苏州太湖马拉松女子比赛中,中国选手何引丽最终获得亚军,落后冠军5秒。但是赛后,何引丽在社交媒体上道歉,称自己最后时刻跑累了,没有拿稳国旗,这究竟是怎么回事?</div>//css
.box {width: 400px;height: 40px;border: 1px solid #f70505;line-height: 20px;
}//js<script type="text/javascript">$(function() {var content_arr = []; //定义一个空数组$('.box').each(function() { //遍历box内容var content = $.trim($(this).text()); //去掉前后文空格content_arr.push(content); //内容放进数组})for (var i = 0; i < content_arr.length; i++) { //遍历循环数组if (content_arr[i].length >= 50) { //如果数组长度(也就是文本长度)大于等于50(数字可自己定义)content = content_arr[i].substr(0, 50) + '...'; //添加省略号并放进box文字内容后面$(".box").eq(i).text(content);} else {content = content_arr[i];$(".box").eq(i).text(content);}}})</script>

插件:

  • clamp.js
  • jQuery.dotdotdot

在学习上有什么疑问随时可以找我我,与大家分享互联网web前端实战操作,无论你是否有基础,我都欢迎。点:前端技术分享

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/427367.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

linux下查看内存使用情况

基本内存术语解读 1> free -m 同样是做为缓存&#xff0c;buffers和cache又有啥区别呢&#xff1f; 于是又查了些资料&#xff0c;发现buffers实际应该是叫“缓冲”&#xff0c;其英文解释是&#xff1a;A buffer is something that has yet to be "written" to d…

redistemplate使用_如何使用 SpringBoot + Redis 优雅的解决接口幂等性问题

# 前言在实际的开发项目中,一个对外暴露的接口往往会面临很多次请求&#xff0c;我们来解释一下幂等的概念&#xff1a;任意多次执行所产生的影响均与一次执行的影响相同。按照这个含义&#xff0c;最终的含义就是 对数据库的影响只能是一次性的&#xff0c;不能重复处理。如何…

python 创建类_python 用type()创建类

type()可以查看一个类型&#xff0c;也可以查看变量的类型class Hello1(object):def hello(self, name world):print(Hello, %s % name)h1 Hello1()h1.hello()print(type(Hello1))print(type(h1))输出&#xff1a;Hello, world#Hello是一个class&#xff0c; 它的类型就是typ…

关于c语言中如何四舍五入(圆整)的问题!

关于c语言中如何四舍五入(圆整)的问题! 在c语言中,用70.0/6得到的值赋给一个浮点变量,只会得到11.666667(因为浮点型只留下小数点后六位),而如果我们想输出结果的约数,必须要对结果进行四舍五入. 一般来说,在c语言中,如果想要对一个结果进行四舍五入,我们通常会先将需要圆整的…

图像的灰度级和动态范围(转)

学习笔记&#xff08;一&#xff09;——图像的灰度级和动态范围转载于:https://www.cnblogs.com/LittleTiger/p/9359712.html

jdbctemplate 开启事务_SpringBoot 系列教程之事务隔离级别知识点小结

上一篇博文介绍了声明式事务Transactional的简单使用姿势&#xff0c;最文章的最后给出了这个注解的多个属性&#xff0c;本文将着重放在事务隔离级别的知识点上&#xff0c;并通过实例演示不同的事务隔离级别下&#xff0c;脏读、不可重复读、幻读的具体场景I. 基础知识在进入…

东风小康为什么是dfsk_助力地摊经济瑞驰纯电动物流车和东风小康微型货车厚积薄发...

核心提示&#xff1a;小康集团旗下瑞驰纯电动物流车及东风小康微型货车深耕多年&#xff0c;其中瑞驰纯电动物流车2015年上市&#xff0c;连续多年销量位列中国行业第一。近日&#xff0c;地摊经济成为热门&#xff0c;疫情常态化下&#xff0c;地摊经济、小店经济对于快速恢复…

链表中删除选定结点的优雅操作!

一般我们在进行单向链表链表的结点删除操作时,都是通过相应的结构体指针进行链表的遍历,然后找 到需要删除的节点,为了完成删除操作,我们需要在寻找该节点时,不断地记录下这个节点前面的节点 (prev),来保证当特定结点被删除后,我们还可以将断开的链表重新连起来,下面给出一段…

python抢货程序_Python自动化xpath实现自动抢票抢货代码示例

本篇文章小编给大家分享一下Python自动化xpath实现自动抢票抢货代码示例&#xff0c;文章代码介绍的很详细&#xff0c;小编觉得挺不错的&#xff0c;现在分享给大家供大家参考&#xff0c;有需要的小伙伴们可以来看看。 总代码&#xff1a; for i in range(51,56): driver.imp…

Ubuntu安装pycharm并且激活

下载pycharm: https://www.jetbrains.com/pycharm/download/#sectionlinux 选择专业版下载&#xff0c;然后提取&#xff0c;也就是解压 进入解压后目录&#xff0c;再进入bin目录&#xff0c;打开终端执行命令 ./pycharm.sh pycharm就启动了 激活Pycharm: 编辑hosts文件&am…

二阶矩阵转置怎么求_矩阵求导术(下)

点击上方“Datawhale”&#xff0c;选择“星标”公众号第一时间获取价值内容本文承接上篇 https://zhuanlan.zhihu.com/p/24709748&#xff0c;来讲矩阵对矩阵的求导术。使用小写字母x表示标量&#xff0c;粗体小写字母表示列向量&#xff0c;大写字母X表示矩阵。矩阵对矩阵的求…

洛谷-DFS-1019-单词接龙-个人AC题解和公共AC题解笔记

学习内容: 预处理万能头文件string的使用 话不多说,直奔主题 本人AC代码 #include<iostream> #include<cstdio> #include<cstring> using namespace std; #define MAXN 21 #define MAXLENGTH 21 int n; int length,max_length; char words[MAXN][MAXLEN…

c语言中x的n次方怎么表示_线性代数的本质及其在人工智能中的应用

线性代数是 AI 专家必须掌握的知识&#xff0c;这已不再是个秘密。如果不掌握应用数学这个领域&#xff0c;你永远就只能是「门外汉」。当然&#xff0c;学习线性代数道阻且长。数学&#xff0c;尤其是线性代数常与枯燥、复杂和毫无意义的事物联系起来。不过你还可以另辟蹊径。…

js之箭头函数

原文 ES6标准新增了一种新的函数&#xff1a;Arrow Function&#xff08;箭头函数&#xff09;。 为什么叫Arrow Function&#xff1f;因为它的定义用的就是一个箭头&#xff1a; x > x * x 上面的箭头函数相当于&#xff1a; function (x) {return x * x; } 箭头函数相当于…

android开发蓝牙是否可见开关_如何从后台开启android蓝牙的可见性以及始终保持可见性...

最近工作中遇到一个特殊的需求&#xff0c;要求代码能够从后台开机android手机蓝牙的可见性。而framework提供了一种打开可见性的操作&#xff0c;就是通过向用户弹出一个提示框&#xff0c;来询问是否允许开启可见性。而且限制了最长时间为300秒&#xff0c;代码如下&#xff…

洛谷-DFS-1101-单词方阵-个人AC题解及公共题解的笔记

先上自己AC代码(博主这个代码修改过多次,只因代码长度过长) #include<bits/stdc.h> using namespace std; #define MAXN 102 int flag; int n; int next1[8][2]{{1,0},{0,1},{-1,0},{0,-1},{1,1},{1,-1},{-1,1},{-1,-1}}; char map1[MAXN][MAXN],map2[MAXN][MAXN]; cons…

django 实现电子支付功能

思路&#xff1a;调用第三方支付 API 接口实现支付功能。本来想用支付宝来实现第三方网站的支付功能的&#xff0c;但是在实际操作中发现支付宝没有 Python 接口&#xff0c;网上虽然有他人二次封装的的 Python 接口&#xff0c;但是对我这个小白白来说上手还是有点难度&#x…

android中怎么保存checkbox中的checked属性_第二十四天HTML中的form表单

form表单用于收集用户信息&#xff0c;如&#xff1a;登录、注册等场景&#xff1b;所有要提交的数据都必须放在form标签中action&#xff1a;提交地址、动作&#xff0c;与input标签中typy标签的submit属性相关联。 &#xff0c;提交地址是action的地址method:提交方法&#x…

Python中曲率与弯曲的转换_1000R曲率更具沉浸感!三星T55曲面显示器评测

在曲面屏的设计上&#xff0c;三星一直在突破极限&#xff0c;比如在2017年推出的49英寸超宽带鱼屏C49HG90&#xff0c;引来众人围观&#xff0c;非常震撼。而在曲率方面&#xff0c;我们常见的有1800R和1500R&#xff0c;但是三星并不满足&#xff0c;于日前推出了一款曲率达到…

树的遍历-Preorde Traversal,Inorder Traversal,Postoder Traversal

上代码(创建树,先序,中序,后序) #include<bits/stdc.h> using namespace std; typedef struct TreeNode *BinTree; struct TreeNode {BinTree left,right;int value; }; BinTree CreateTree() {BinTree T;int value;cin>>value;if(value0) //如果输入0,则创…