Js与css实现文本溢出自动添加省略号方法总结
来源：自学PHP网
时间：2014-09-19 14:47 作者：
阅读:次
[导读] 我们经常会碰到文章标题过长了，这样会影响网页美观了，但又不能使用程序直接截取掉了，这样对seo优化又不好，思来想去找了一些可以实现文本溢出自动添加省略号方法，这里主要...
|
1.常规css方法——可以实现IE，Safari，chrome，opera浏览器下文字溢出省略号表示
这是一段测试文字，主要是用来测试文字溢出后是否会用省略号显示。
| 代码如下 |
复制代码 |
| .zxx_text_overflow_1{width:27em; white-space:nowrap; text-overflow:ellipsis; -o-text-overflow:ellipsis; overflow:hidden;} |
2.使用ellipsis.xml文件使Firefox支持文字溢出后点点点省略号表示
这段代码调用了跨文件夹路径的ellipsis.xml文件，看Firefox浏览器下是够文字溢出省略号表示。
ps: 在Firefox下上面div内容显示空白，此div内容是：“这段代码添加了跨文件夹路径的ellipsis.xml文件，看Firefox浏览器下是够文字溢出省略号表示”。
| 代码如下 |
复制代码 |
.zxx_text_overflow_2{width:27em; white-space:nowrap; text-overflow:ellipsis; -o-text-overflow:ellipsis; -moz-binding:url('../xml/ellipsis.xml#ellipsis'); overflow:hidden;}
|
这段代码调用了同文件夹路径的ellipsis.xml文件，看Firefox浏览器下是够文字溢出省略号表示。
ps: 在Firefox下上面div文字溢出省略号显示，此div内容是“这段代码调用了同文件夹路径的ellipsis.xml文件，看Firefox浏览器下是够文字溢出省略号表示”。至此，几乎所有主流浏览器都实现文字溢出省略号表示。
| 代码如下 |
复制代码 |
.zxx_text_overflow_3{width:27em; white-space:nowrap; text-overflow:ellipsis; -o-text-overflow:ellipsis; -moz-binding:url('ellipsis.xml#ellipsis'); overflow:hidden;}
|
这里有个小结论：这个使Firefox浏览器下文字溢出省略号表示的ellipsis.xml文件要在页面的同一目录下，或是下一级目录下（我已测试），要是向上跨文件夹访问或绝对路径访问则失效。原因不详！
js实现代码
| 代码如下 |
复制代码 |
|
<title>Js文本溢出自动添加省略号ellipsis-兼容版</title>
<style type="text/css">
* {margin:0;padding:0;font-size:12px;}
#div{width:200px;height:200px;}
#div2{width:300px;height:200px;}
.ellipsis {border:1px solid red;font-size:12px;line-height:25px;word-wrap:break-word;}
</style>
<script type="text/javascript">
function formatEllipsis(){
var arr=[];
var aDiv=document.getElementsByTagName("*");
for(var i=0;i<aDiv.length;i++){
if(aDiv[i].className=="ellipsis"){
arr.push(aDiv[i]);
}
}
for(var i=0;i<arr.length;i++){
new ellipsis(arr[i]);
}
}
function ellipsis(obj){
this.obj=obj;
this._style=[];
this._width=getStyle(this.obj,"width");
this._height=getStyle(this.obj,"height");
this._fontSize=getStyle(this.obj,"fontSize");
this._lineHeight=getStyle(this.obj,"lineHeight");
var limit=this.format();
//alert(limit);
var _html=obj.innerHTML;
obj.innerHTML=_html.substring(0,limit)+"...";
}
ellipsis.prototype.format=function(){
var _html=this.obj.innerHTML;
var _len=_html.length;
var _lines=Math.floor(this._width/this._lineHeight);
var _cols=Math.floor(this._width/this._fontSize);
return _lines*_cols-3;
}
function getStyle(e,p){
var s= e.currentStyle ? e.currentStyle[p] : document.defaultView.getComputedStyle(e,null)[p];
return parseInt(s);
}
window.onload=function(){
formatEllipsis();
}
</script>
</head>
<body>
<div id="div" class="ellipsis">你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好</div>
<div id="div2" class="ellipsis">nnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnn
nnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnn
nnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnn
nnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnn
nnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnn
nnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnn
nnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnn
nnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnn</div>
</body>
</html>
|
css文本溢出自动添加省略号
1.兼容 IE6 / IE7 /FireFox
2.文本对象:table里的文本，不能换行
3.如果采用js截取，支持resize,并保证页面执行效率
4.确保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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>css文字截取</title>
<style type="text/css">
body{font-size:13px;color:#8c966b;}
div{clear:both;width:340px;border:1px solid #333;margin:3px;padding:3px;}
div a{color:#8c966b;text-decoration:none;}
div a:hover{text-decoration:underline;}
div a{display:block;width:310px;white-space:nowrap;overflow:hidden;float:left;
-o-text-overflow: ellipsis; /* for Opera */
text-overflow:ellipsis; /* for IE */
}
div:after{content:"...";padding-left:3px;font-size:12px;}/* for Firefox */
</style>
</head>
<body>
<div><a href="">用css来实现自动截取文字，不需要后台程序和JS的使用</a></div>
<div><a href="">好处是：有利于内容完整性，有利于SEO，无需后台程序处理，可以在前台随时调节要截取的长度。</a></div>
<div><a href="">不好的地方：不能自动判断截取长度，当字符很短的时候在Firefox中也会生成后面的省略符号。</a></div>
<div><a href="">另外在设置截取宽度的时候，要注意，尽量让文字截取完整</a></div>
</body>
</html>
|
|
