关于用css实现的文字超出部分显示省略号

文字超出部分显示省略号还是比较常用的一个效果,最近看到网上的一些方法亲自实践了一下,发现有些以前一些浏览器不能用的属性现在可以用了,于是研究了一番,现总结如下:

我们先来看下HTML代码:

<div><p><span>用css来实现当文字超出宽度时显示省略号的效果</span></p>
</div>

CSS代码:

div{width: 200px;
}span{display: block;width: 200px;overflow: hidden;white-space: nowrap;text-overflow:ellipsis;
}

我们可以看到其中可用到了text-overflow:ellipsis;网上说这是一个IE特有的属性,别的浏览器不支持,经过实践,现在chrome和火狐都已经支持了,

在chrome下的效果:

捕获

我的chrome版本号:

2

在火狐下的效果:

捕获

我的火狐版本号:

3

又说opera不支持text-overflow,针对Opera的话得使用-o-text-overflow:ellipsis;欧朋浏览器还没有装所以无法实践,但通过网上查找已经找到答案,有博主说自己新版的欧朋已经支持这个属性了,看博客时间是2012年,看来也是早就支持了的。

而且CSS中的这些属性不能少,否则不能显示省略号。可以顺着这样的思路来,要把文本限制在一行(white-space:nowrap;(white-space属性声明建立布局过程中如何处理元素中空白符)),这一行有宽度(width),有宽度就有超出的部分,将超出的部分隐藏起来(overflow:hidden;),然后后面跟上省略号(text-overflow:ellipsis;)。

还有一种非常规的方法补省略号,要用到伪对象after,思路是一个标签作内容,再加一个标签作填补省略号用,并且加起来的宽度不能超过它们容器的宽度,否则就换行。

来看下CSS代码:

span{display: block;width: 200px;overflow: hidden;white-space: nowrap;}p{clear: both;}p span{float: left;max-width: 175px;}p:after{content: "...";}

这样能有省略号的效果,但会有小小的问题,我们一起来看下效果:

捕获

在chrome下和火狐下都是这样的效果,可见这样的方法并不完美。

并且使用text-overflow:ellipsis来显示省略号也有好处,可以不用限定字数,对SEO也比较友好,比如我们的标题使用这个属性,标题看起来被截取了,但搜索引擎搜索的时候还是按完整的标题搜索,因为标题实际上并没有被截取,只是没有显示完全而已。

当然这样控制的方法都有一个最大的不足就是只能控制一行,js可以控制多行,并且也不复杂,我们这里只是就事论事罢了。

此外说到SEO,最近正在看一本书叫《榨干百度谷歌》,改天看完把笔记整理出来。此书没有什么干货,感觉可以归于科普读物。

本次学习不仅学到知识,也再一次验证了那句话:实践出真知。不仅要多看,还要多写,多练,实践才是检验真理的唯一标准,因为IT技术发展迅速,不知道什么时候以前不能用的现在就可以用了,以前能用的现在就不能用了,让代码真正的在自己手上过一遍,这是作为程序员基本的一个节操。

转载于:https://www.cnblogs.com/purl135/p/4118712.html

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

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

相关文章

AIoT的生死局:未来的AIoT很赚钱,但目前的AI+IoT很花钱

来源&#xff1a;物联网智库整理摘要&#xff1a;AIoT目前仍处于发展的起步阶段&#xff0c;只能作为一种美好的愿想&#xff0c;无论从AI还是IoT本身来看&#xff0c;仍然存在着许许多多的问题。如同互联网等新兴技术发展初期一样&#xff0c;AIoT也多少存在追捧与泡沫。尽管从…

链表的经典问题

链表的经典问题 如何判断两个单链表是否相交&#xff0c;如果相交&#xff0c;找出交点&#xff08;两个链表都不存在环&#xff09; 如果两个单链表相交&#xff0c;那应该呈“Y”字形&#xff0c;也就是从交点以后的部分是两个链表的公共节点。 所以&#xff0c;判断是否相交…

亚马逊、谷歌和微软寸土必争的新战场

作者&#xff1a; Caroline Donnelly 编译&#xff1a;机器之能 张玺摘要&#xff1a;当亚马逊、谷歌与微软都表示要争取所有可能的垂直市场客户时&#xff0c;云服务三巨头在零售市场的竞争变得愈发有趣。云技术在零售市场应用方面表现抢眼&#xff0c;但是竞争问题正在影响客…

duilib环境配置以及简单入门介绍

内容全部为转载&#xff1a; VS2013的编译&#xff0c;https://www.cnblogs.com/Alberl/p/3342030.html duilib框架介绍&#xff0c;以及VS2013配置&#xff0c;创建工程&#xff0c;调试代码部分&#xff1a; https://blog.csdn.net/lanuage/article/details/52040306 https:/…

2019年汽车行业深度投资研究

来源&#xff1a;中泰证券2018年预计我国汽车销售负增长&#xff0c;为30年来首次&#xff0c;批发数据自5月份开始逐步下降&#xff0c;尤其是9月之后,销售增速加速下滑,判断汽车市场弱势的原因和持续时间长短&#xff0c;是思考2019年汽车行业投资策略的前提。我们认为&#…

有没有哪些数学猜想是验证到很大的数以后才发现是错的?

来源&#xff1a;孙天任算数学苑素数的分布密度为 ρ(x)~1/ln(x)&#xff0c;从而在 x 以内的素数个数——通常用 π(x) 表示——为&#xff1a; π(x) ~ Li(x) 其中 Li(x) ≡ ∫ 1/ln(x) dx 是对数积分函数 。这个结果有些读者可能也认出来了&#xff0c;它正是著名的素数定理…

徐铁:当深度学习握手脑科学-圣城会议归来

原创&#xff1a;许铁 来源&#xff1a;混沌巡洋舰耶路撒冷号称三教圣地&#xff0c; 而它的牛逼之处绝不仅在于宗教&#xff0c; 如果你深入了解&#xff0c; 你会发现它的科学&#xff0c;尤其是理论创新也同样牛逼&#xff0c; 尤其是在脑科学和人工智能方向。 当然神族…

重磅!联合国权威AI趋势报告,美中日韩四分天下

来源&#xff1a;智东西摘要&#xff1a;AI趋势报告&#xff0c;中美专利申请和科学出版数遥遥领先。近年来&#xff0c;随着AI从理论知识落地到全球市场&#xff0c;AI正以其潜在的革命性影响&#xff0c;持续推动技术和产业的重大变革&#xff0c;从天气预报、自动驾驶、癌症…

通信产业5G迭代,万亿机遇一触即发

来源&#xff1a;中银国际摘要&#xff1a;进入本世纪一零年代后&#xff0c;全球通信行业首先迎来了4G商用的元年。▌通信产业5G迭代促使中国企业突破进入本世纪一零年代后&#xff0c;全球通信行业首先迎来了4G商用的元年。LTE网络在世界各地开花&#xff0c;“管”领域的性能…

duilib中界面的布局方式

参考博客&#xff1a;https://blog.csdn.net/zhuhongshu/article/details/38531447 常用的布局默认为相对布局&#xff0c;默认floatfalse&#xff0c;该属性为true时&#xff0c;表示绝对布局&#xff1b; 相对布局方式可以依据界面自动调整控件大小。 最常用的VerticalLayout…

美丽新世界:这七个原因将让未来更美好

来源&#xff1a;资本实验室摘要&#xff1a;技术进步推动人类社会的进步。然而在现实生活中&#xff0c;对技术的恐惧困扰着相当一部分人。暴走的机器人、失控的AI、滥用的人体增强……这些经常出现于各种反乌托邦科幻故事中的场景也被认为是对技术破坏的一种警示。如果能够从…

学习OpenStack之 (4): Linux 磁盘、分区、挂载、逻辑卷管理 (Logical Volume Manager)

0. 背景&#xff1a; inux用户安装Linux操作系统时遇到的一个常见的难以决定的问题就是如何正确地评估各分区大小&#xff0c;以分配合适的硬盘空间。普通的磁盘分区管理方式在逻辑分区划分好之后就无法改变其大小&#xff0c;当一个逻辑分区存放不下某个文件时&#xff0c;这个…

写论文文献引用方式

打开百度学术&#xff1a; 如下&#xff1a;

美国DARPA204页可解释人工智能文献综述论文《Explanation in Human-AI Systems》

来源&#xff1a;专知摘要&#xff1a;本文介绍Arxiv上的《Explanation in Human-AI Systems》&#xff0c;一篇关于可解释机器学习的综述&#xff0c;介绍了可解释机器学习的多学科观点、历史研究、模型、关键点等。可解释AI是现在正火热的科研和工程问题。Arxiv上一篇《Expla…

BestCoder22 1003.NPY and shot 解题报告

题目链接&#xff1a;http://acm.hdu.edu.cn/showproblem.php?pid5144 题目意思&#xff1a;有个人抛物体&#xff0c;已知抛的速度和高度&#xff0c;问可以抛到的最远距离是多少。即水平距离。 做的时候是抄公式的&#xff0c;居然过了&#xff0c;幸运幸运............ 1 #…

37页PPT,全面解读5G产业链及未来趋势!

来源&#xff1a;国信证券经济研究所、全球物联网观察摘要&#xff1a;接下来的一年&#xff0c;5G无疑是全球关注的焦点。接下来的一年&#xff0c;5G无疑是全球关注的焦点。5G开始商用化&#xff0c;除了进一步促进移动互联网的发展&#xff0c;更重要的是会促进移动互联网和…

atoi简析

原文链接 atoi()函数的功能&#xff1a;将字符串转换成整型数&#xff1b;atoi()会扫描参数nptr字符串&#xff0c;跳过前面的空格字符&#xff0c;直到遇上数字或正负号才开始做转换&#xff0c;而再遇到非数字或字符串时&#xff08;\0&#xff09;才结束转化&#xff0c;并将…

盘点2018十大科技丑闻,IT相关两项

来源&#xff1a;科技日报2018这一年里&#xff0c;风起云涌的科技界很忙&#xff0c;有些人尝到了甜头&#xff0c;有些人却吃到了苦头&#xff0c;有些事件令人瞠目结舌、难以置信……   盘点2018年十大科技丑闻是为了更加清醒地看到科技发展过程中的不尽如人意。  更重要…

QT安装和Hello,world

QT安装环境介绍&#xff1a; https://blog.csdn.net/hechao3225/article/details/52981007 教程&#xff1a; http://c.biancheng.net/qt/ Hello,world简单示例&#xff0c;VS下编写纯代码的界面&#xff1a; http://c.biancheng.net/view/1824.html 第一步&#xff1a; 第二…

(转) 基于MapReduce的ItemBase推荐算法的共现矩阵实现(一)

转自&#xff1a;http://zengzhaozheng.blog.51cto.com/8219051/1557054 一、概述 这2个月为公司数据挖掘系统做一些根据用户标签情况对用户的相似度进行评估&#xff0c;其中涉及一些推荐算法知识&#xff0c;在这段时间研究了一遍《推荐算法实践》和《Mahout in action》&…