本文主要包含CSS,超出隐藏等相关知识,佚名 希望在学习及工作中可以帮助到您
CSS限制字数
<!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>
提示：您可以先修改部分代码再运行
参考文章：
http://www.jb51.net/article/15239.htm
http://www.jb51.net/article/14210.htm
<!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>
提示：您可以先修改部分代码再运行
参考文章：
http://www.jb51.net/article/15239.htm
http://www.jb51.net/article/14210.htm