首页
网页制作
网络编程
脚本专栏
数据库
网站运营
网络安全
平面设计
CMS教程
搜索
建站极客
网页制作
CSS
正文
CSS 超出隐藏实现限制字数的功能代码(多浏览器)
所属分类：
网页制作
/
CSS
阅读数： 89
收藏 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
更多精彩内容
其他人还在看
CSS入门教程:计算CSS盒模型宽和高
出处：当我们布局一个网页的时候，经常会遇到这样的一种情况，那就是最终网页成型的宽度或是高度会超出我们预先的计算，其实就就是所谓的CSS的盒模型造成的。 #test{margin:10px;padding:10px;width:100px;height:100px;}
评论 0
收藏 0
赞 0
分享
在IE流览器中正确显示PNG透明图片
png图片有很好的品质。阴影效果也不会有杂边,很流畅。如果插入网页的话可以给网站内容增色不少!更重要的是在不增加图片容量大小的情况下提高了页面的图片的质量。对于有复杂背景，如：在有颜色过度背景上插入不规则边框的图片带来极大很便利! 但目前IE中对于插入
评论 0
收藏 0
赞 0
分享
CSS教程:DIV底部放置文字
css对文字的布局上没有靠容器底部对齐的参数，目前使用的一个不错的方法也比较好.就是用position属性来解决，看下面的代码，用position的相对和绝对定位功能也轻松的实现了，文字靠近div低部对齐，并且靠近的距离还可以精确到像素，自己可以调节，是不是很不错呢?
评论 0
收藏 0
赞 0
分享
如何用CSS让文字居于div的底部
这个问题是别人提出的，因为css对文字的布局上没有靠容器底部对齐的参数，（或许有但是我没有发现）不过目前我使用的一个不错的方法也比较好．就是用position属性来解决，看下面的代码，我用position的相对和绝对定位功能也轻松的实现了，文字靠近div低部对齐，并且靠近
评论 0
收藏 0
赞 0
分享
从A页面连接到B页面后并直接把B页面的隐藏层显示
这个效果实现的是，在B页面里有两个层，一个显示层，我们暂定名c层，一个是隐藏层，我们暂定名d层，单独进B页面的时候，c层显示，d层隐藏，然而从A页面连接到B页面的时候，则是让d层显示，c层隐藏，我觉得这个效果对网页设计者以后会有很大帮助，现在把代码发出来，
评论 0
收藏 0
赞 0
分享
CSS样式表定义标签li前面样式
定义LI前面的小点样式 view plaincopy to clipboardprint? 语法： list-style-type : disc | circle | square | decimal | lower-roman | upper-roman | lowe
评论 0
收藏 0
赞 0
分享
符合标准的div css制作的弹出菜单
本文介绍了五款符合标准的div css制作的弹出菜单,而且不含有js的. NO.1最基本的：二级dropdown弹出菜单 <!DOCTYPE html PUB
评论 0
收藏 0
赞 0
分享
CSS实现在文章每段后面加入带连接的隐藏文字
代码主要理解３个参数：createElement、createTextNode、appendChild。这３个js参数分别是创建元素、创建字符、追加节点。代码原理：循环页面段落标签<p>，创建连接元素<a>，创建要显示的连接字符，用SetAttribute
评论 0
收藏 0
赞 0
分享
CSS:浏览器特定选择器介绍
当你想在一个浏览器里改变样式而不像在其他浏览器中改变时，这些选择器很有用。 IE6以下 *html{} IE 7 以下 *:first-child html {} * html {} 只对IE 7 *:first-child html {} 只对IE 7
评论 0
收藏 0
赞 0
分享
WEB标准学习,认识两种网页声明的含义
即网页标准推出来以后，我们时常会看到两种不同的网页的声明，一个是Dhtml，一个是Xhtml。如下所示： <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "ht
评论 0
收藏 0
赞 0
分享
查看更多
网络赚钱
更多
90后网络爆红美女卖"毒面膜" 年收入超七位数
朋友圈被一条人贩消息刷屏：竟然是营销?
网络赚钱的几种模式总结
SEO赚钱之道：11种可以让你盈利的SEO实业方法
未来5大网络销售模式选哪种好？
草根站长靠什么赚钱?什么样的人能成为赚钱的草根站长?
站长故事
更多
美团副总裁杨俊：做O2O的4个关键节点 会高效率地花钱
阿里会成为下一个谷歌？谁是Google真正的挑战者
直击苹果发布会：苹果iWatch能否能撑起一个市场？
站长故事 一位“苦逼站长”的心酸 SEO真的如此简单吗？
浅析网站运营失败：你除了报怨还学会了什么
浅析将两个月的新站做到权重4的方案
