首页
网页制作
网络编程
脚本专栏
数据库
网站运营
网络安全
平面设计
CMS教程
搜索
建站极客
网页制作
CSS
正文
CSS 超出隐藏实现限制字数的功能代码(多浏览器)
所属分类：
网页制作
/
CSS
阅读数： 96
收藏 0
赞 0
分享
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不兼容但可以使用，没有省略号。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-cn"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>脚本之家_www.jb51.net</title><base onmouseover="window.status='欢迎到脚本之家www.jb51.net';return true"><meta http-equiv="x-ua-compatible" content="ie=7" /> <meta name="robots" content="all" /><meta name="author" content="dxy | www.jb51.net" /><meta name="Copyright" content="Copyright (c) 2006-2008 jb51.net" /></head><body><div style="white-space:nowrap; width:200px; height:20px; line-height:20px; text-overflow:ellipsis;-moz-text-overflow: ellipsis; overflow:hidden">脚本之家是一个专业的收集各类脚本学习资料的网站,尽量修正错误打造精品脚本类学习网站,我们为大家游戏脚本资源,源码,软件,asp,php,javascript等编程资料,是网页制作,网络编程,网站建设人士的聚集场所。</div></body></html>
提示：您可以先修改部分代码再运行
下面是用js实现的通过计算数字的长度进行截取的，但对于中文跟英文一样算一个，是肯定不行的了，脚本之家以前发布过js计算字符串长度的，中文算两个字符的文章，可以参考下。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>JS test</title><style type="text/css">*{ margin:0; padding:0;}body{ padding:10px; font-family:Arial;}#ididid{ width:150px; line-height:20px; overflow:hidden; border:1px solid #999;}</style></head><body><script type="text/javascript">function testAuto(thisId,needLeng){ var ididid = document.getElementById(thisId); var nowLeng = ididid.innerHTML.length; if(nowLeng > needLeng){ var nowWord = ididid.innerHTML.substr(0,needLeng)+'...'; ididid.innerHTML = nowWord; }}</script><div id="ididid">12345678901234567890test test test test test test test test test test test test test test test test test test test test test test test</div><script type="text/javascript">testAuto('ididid',15)</script></body></html>
提示：您可以先修改部分代码再运行
这个是css after实现的
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" c> <title>css把超出的部分显示为省略号的方法兼容火狐_脚本之家_www.jb51.net</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>
提示：您可以先修改部分代码再运行
参考文章：
https://www.jb51.net/article/15239.htm
https://www.jb51.net/article/14210.htm
更多精彩内容
其他人还在看
Opera中国的WEB标准课程
网页制作Webjx文章简介：在这篇文章里，我要向大家介绍我和其他很多人花费数月时间开发的一个课程——Web标准课程，该课程旨在向大家提供Web设计和开发的坚实基础，无论读者是谁，此教程完全免费、可访问，并且不需要预备知识。当然，我主要还
评论 0
收藏 0
赞 0
分享
CSS样式表渐进增强的基本概念
网页制作Webjx文章简介：如果你挠着头想弄清楚优雅降级和渐进增强的区别，我告诉你，这是视角问题。优雅降级和渐进增强都考虑网站在各种设备的各种浏览器上如何良好运转。两者区别的关键在于它们各自关注的焦点，以及这种关注对工作流程的影响
评论 0
收藏 0
赞 0
分享
简单介绍Web Developer插件制作网页
网页制作Webjx文章简介：Firefox浏览器是一个良好支持W3C标准的开放源代码的浏览器，拥有Linux/Windows/Mac版本。因为Firefox浏览器良好支持W3C标准，所以使用Firefox来调试网页是非常好的。 Firefox浏览器是
评论 0
收藏 0
赞 0
分享
CSS布局带来的巨大影响:CSS display属性值
网页制作Webjx文章简介：网页元素应用上那些与表格相关的display属性值后，能够模仿出与表格相同的特性。我将会在该文中给大家演示这种方法给CSS布局带来的巨大影响。 应原书编辑要求，先在文章顶部给出链接：《Everything You
评论 0
收藏 0
赞 0
分享
用div css模拟表格对角线
这只是探讨一种CSS模拟表格对角线的用法，实际在工作中可能觉得这样做有点小题大作，这不是本主题讨论的重点。如果对此深以为然的朋友，请一笑过之 首先声明： 这只是探讨一种CSS模拟表格对角线的
评论 0
收藏 0
赞 0
分享
IE Firefox在css中的差别 (部分)
1、单位问题 问题：任何距离的数值ie可以不加单位，ff必须要求写单位（0除外） 解决：写全单位如padding:0px; 2、水平居中 问题：div里的内容，ie默认为center，而ff默认left 解决：mairgin:0px auto; 3、高度问题
评论 0
收藏 0
赞 0
分享
不用js可以实现信息提示效果
[code] <style> body { font:verdena; font-size:14px; color:#000 } h1{ font:verdena; font-size:22px; color:#000 } h2{ font:verdena;
评论 0
收藏 0
赞 0
分享
CSS解决未知高度的垂直水平居中自适应问题
今天有人问起，晚上试着写出来，供参考； 以下代码兼容主流浏览器IE6、IE7、Firefox、Opera。 从最简单的开始………… 一、如何让一个DIV水平居中？ 这个简单不作过多说明！ [code] <st
评论 0
收藏 0
赞 0
分享
CSS cursor 属性 -- 鼠标指针样式效果
取值: [ [<uri> ,]* [ auto | crosshair | default | pointer | move | e-resize | ne-resize | nw-resize | n-resize | se-resize | sw-resize |
评论 0
收藏 0
赞 0
分享
css 简单区别ie6,ie7,firefox的写法
同一样式里可以这样 [code] margin:17px; FF +margin:17px; IE6 IE7 _margin:17px; IE6 [/code] 按这个顺序，刚好区分开三个浏览器
评论 0
收藏 0
赞 0
分享
查看更多
网络赚钱
更多
即使现在停产 微商面膜至少需需5年才能卖完
四年的网赚经验
网络赚钱的几种模式总结
教育培训类网站的盈利模式
主观臆断,百度联盟审核的条件
冲刺双十一 如何做好淘宝双11期间的推广及运营
站长故事
更多
有钱就是任性 2014年科技界大佬十大惊人语录
快播之死：中国互联网的政策红利期已结束
互联网屌丝合伙创业经验分享
小白站长：一次网站被 K 的经历
我是怎么赚到人生的第一个百万的
如何让自己的网站流量暴增并增加成交率
