CSS 超出隐藏实现限制字数的功能代码(多浏览器

建站知识 2021-07-03 08:42www.168986.cn长沙网站建设

CSS限制字数

复制代码

代码如下:

overflow:hidden;
white-space:nowrap;
text-overflow:ellipsis; / for IE /
-o-text-overflow: ellipsis; / for Opera /
-icab-text-overflow: ellipsis; / for iCab /
-khtml-text-overflow: ellipsis; / for Konqueror Safari /
-moz-text-overflow: ellipsis; / for Firefox,mozilla /
-webkit-text-overflow: ellipsis; / for Safari,Swift/

看了上面的代码挺郁闷的，根本实现不了，看来好多站长对这种简单的代码都不测试就发了，郁闷。所以我们特别发一下我们自己用的，但firefox不兼容但可以使用，没有省略号。

提示您可以先修改部分代码再运行

狼蚁网站SEO优化是用js实现的通过计算数字的长度进行截取的，但对于中文跟英文一样算一个，是肯定不行的了，狼蚁SEO以前发布过js计算字符串长度的，中文算两个字符的文章，可以参考下。

提示您可以先修改部分代码再运行

这个是css after实现的

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://.w3./TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" c> <title>css把超出的部分显示为省略号的方法兼容火狐_狼蚁SEO_.jb51.</title> <style>  { margin: 0; padding: 0; } a { text-decoration: none; color: #000; } a:hover { text-decoration: none; color: #000; } ul { width: 300px; margin: 40px auto; padding: 12px 4px 12px 24px; border: 1px solid #D4D4D4; background: #F1F1F1; } li { margin: 12px 0; } li a { display: block; width: 80px; overflow: hidden;/注意不要写在了/ white-space: nowrap; -o-text-overflow: ellipsis; text-overflow: ellipsis; } / firefox only / li:not(p) { clear: both; } li:not(p) a { max-width: 170px; float: left; } li:not(p):after { content: "..."; float: left; width: 25px; padding-left: 5px; color: #000; } </style> </head> <body> <ul> <li><a href="#">suntear的技术空间</a></li> <li><a href="#">suntear的技术空间</a></li> <li><a href="#">suntear的技术空间</a></li> <li><a href="#">suntear的技术空间</a></li> <li><a href="#">suntear的技术空间</a></li> <li><a href="#">suntear的技术空间</a></li> <li><a href="#">suntear的技术空间</a></li> </ul> </body> </html>

提示您可以先修改部分代码再运行

参考文章

上一篇：Div+CSS 布局入门教程之二构建网站下一篇：css的核心内容标准流、盒子模型、浮动、定位等

CSS 超出隐藏实现限制字数的功能代码(多浏览器

狼蚁网络搜索

狼蚁网络导航

长沙seo优化

长沙网络营销

长沙网站建设

CSS 超出隐藏实现限制字数的功能代码(多浏览器

长沙网站设计

狼蚁网络搜索

狼蚁网络导航

长沙seo优化

长沙网络营销

长沙网站建设