css / js 控制 文本溢出 省略号显示
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了css / js 控制 文本溢出 省略号显示相关的知识，希望对你有一定的参考价值。
要求：
1.兼容 IE6 / IE7 /FireFox
2.文本对象:table里的文本，不能换行
3.如果采用js截取，支持resize,并保证页面执行效率
4.确保firefox下省略号的出现
补充：最好使用css控制，如果使用after,希望不出现换行的现象，先提供50分，如果满足需求将追加200分
谢谢1楼，不过像你说的有两个问题，一个firefox下省略号一直都有，另外想中英文混合的，截取宽度要设置就比较麻烦了，不会设置的刚好能让截取的完整!
function initMozTextOverflow(obj)
function re_render()
doMozTextOverflow(obj);
setTimeout(re_render,0);
function doMozTextOverflow(obj)
function _overflow(e)
var el = e.currentTarget;
el.className="_textOverflow";
function _underflow(e)
var el = e.currentTarget;
el.className="_textUnderflow";
obj.className="_textUnderflow";
obj.addEventListener("overflow", _overflow, false);
obj.addEventListener("underflow", _underflow, false);
obj.ins = document.createElement("ins");
obj.ins.innerhtml="…";
obj.appendChild(obj.ins);
obj.onmousedown = function(e)
this.selectStartX = e.clientX - document.getBoxObjectFor(this).x;
obj.onmouseup = function(e)
this.selectStartX = null;
obj.onmousemove = function(e)
if(this.selectStartX!=null )
var mx = e.clientX - this.selectStartX;
var ex = this.offsetWidth - this.selectStartX;
if( ( ex - mx) < (this.ins.offsetWidth+3) )
if(this.className!="_textUnderflow")
this.className="_textUnderflow";
this.scrollLeft=0;
var box = document.createElement("input");
box.setAttribute("type","text");
box.value=1111
this.appendChild(box);
box.select();
this.removeChild(box);
this.focus();
else
if(this.className!="_textOverflow")
this.className="_textOverflow"
return false;
;
</script>
<style>
bodyfont-family:Verdana;
pcolor:#FF0099;font-size:0.78em;margin:0.5em;
/*Sample 1*/
.textOverflowwidth:50%;border:solid 1px #222222;
.textOverflow div
height:1.5em;
position:relative;
font-size:0.78em;
width:95%;
border-bottom:solid 1px #aaaaaa;
padding:2px;white-space:nowrap;
overflow:hidden;
margin:2px 0;
text-overflow:ellipsis;
-moz-binding:url("moz-text-overflow.xml#XBLDocument");/*Extensible Biding Language for Firefox*/
.textOverflow div insposition:absolute;right:0;bottom:-0.2em;width:1.5em;text-align:right;height:2em;min-width:41px;text-decoration:none;background:url(text-fade.png) repeat-y;display:none;
.textOverflow div._textUnderflowoverflow:auto
.textOverflow div._textUnderflow insdisplay:none;
.textOverflow div._textOverflowoverflow:hidden;
.textOverflow div._textOverflow insdisplay:block;
table.textOverflowtable-layout:fixed;
</style>
<h3>Demo - Listing</h3>
<ol class="textOverflow">
<li><div>sit amet, consectetuer adipiscing elit. In mollis. Aenean viverra, pede in blandit ultricies, en End!</div></li>
<li><div>sit amet, consectetuer adipiscing elit. In mollis. Aenean viverra, pede in blandit ultricies End!</div></li>
<li><div>sit amet, consectetuer adipiscing elit. In mollis. Aenean viverra, pede in blandit ultri End!</div></li>
<li><div>sit amet, consectetuer adipiscing elit. In mollis. Aenean viverra, pede in blandit u End!</div></li>
<li><div>sit amet, consectetuer adipiscing elit. In mollis. Aenean viverra, pede in bland End!</div></li>
<li><div>sit amet, consectetuer adipiscing elit. In mollis. Aenean viverra, pede in b End!</div></li>
<li><div>sit amet, consectetuer adipiscing elit. In mollis. Aenean viverra, pede End!</div></li>
<li><div>sit amet, consectetuer adipiscing elit. In mollis. Aenean viverra, p End!</div></li>
<li><div>sit amet, consectetuer adipiscing elit. In mollis. Aenean viverr End!</div></li>
<li><div>sit amet, consectetuer adipiscing elit. In mollis. Aenean vi End!</div></li>
<li><div>sit amet, consectetuer adipiscing elit. In mollis. Aenea End!</div></li>
<li><div>sit amet, consectetuer adipiscing elit. In mollis. A End!</div></li>
<li><div>sit amet, consectetuer adipiscing elit. In molli End!</div></li>
<li><div>sit amet, consectetuer adipiscing elit. In m End!</div></li>
<li><div>sit amet, consectetuer adipiscing elit. End!</div></li>
<li><div>sit amet, consectetuer adipiscing el End!</div></li>
<li><div>sit amet, consectetuer adipiscin End!</div></li>
<li><div>sit amet, consectetuer adipi End!</div></li>
<li><div>sit amet, consectetuer a End!</div></li>
<li><div>sit amet, consectetu End!</div></li>
<li><div>sit amet, consec End!</div></li>
<li><div>sit amet, co End!</div></li>
<li><div>sit amet End!</div></li>
<li><div>sit End!</div></li>
<li><div> End!</div></li>
</ol>
<h3>Demo - DataGrid</h3>
<table class="textOverflow">
<tr><td><div>sit amet, consectetuer adipiscing elit. In mollis. Aenean viverra, pede in blandit ultricies, en End!</div></td></tr>
<tr><td><div>sit amet, consectetuer adipiscing elit. In mollis. Aenean viverra, pede in blandit ultricies End!</div></td></tr>
<tr><td><div>sit amet, consectetuer adipiscing elit. In mollis. Aenean viverra, pede in blandit ultri End!</div></td></tr>
<tr><td><div>sit amet, consectetuer adipiscing elit. In mollis. Aenean viverra, pede in blandit u End!</div></td></tr>
<tr><td><div>sit amet, consectetuer adipiscing elit. In mollis. Aenean viverra, pede in bland End!</div></td></tr>
<tr><td><div>sit amet, consectetuer adipiscing elit. In mollis. Aenean viverra, pede in b End!</div></td></tr>
<tr><td><div>sit amet, consectetuer adipiscing elit. In mollis. Aenean viverra, pede End!</div></td></tr>
<tr><td><div>sit amet, consectetuer adipiscing elit. In mollis. Aenean viverra, p End!</div></td></tr>
<tr><td><div>sit amet, consectetuer adipiscing elit. In mollis. Aenean viverr End!</div></td></tr>
<tr><td><div>sit amet, consectetuer adipiscing elit. In mollis. Aenean vi End!</div></td></tr>
<tr><td><div>sit amet, consectetuer adipiscing elit. In mollis. Aenea End!</div></td></tr>
<tr><td><div>sit amet, consectetuer adipiscing elit. In mollis. A End!</div></td></tr>
<tr><td><div>sit amet, consectetuer adipiscing elit. In molli End!</div></td></tr>
<tr><td><div>sit amet, consectetuer adipiscing elit. In m End!</div></td></tr>
<tr><td><div>sit amet, consectetuer adipiscing elit. End!</div></td></tr>
<tr><td><div>sit amet, consectetuer adipiscing el End!</div></td></tr>
<tr><td><div>sit amet, consectetuer adipiscin End!</div></td></tr>
<tr><td><div>sit amet, consectetuer adipi End!</div></td></tr>
<tr><td><div>sit amet, consectetuer a End!</div></td></tr>
<tr><td><div>sit amet, consectetu End!</div></td></tr>
<tr><td><div>sit amet, consec End!</div></td></tr>
<tr><td><div>sit amet, co End!</div></td></tr>
<tr><td><div>sit amet End!</div></td></tr>
<tr><td><div>sit End!</div></td></tr>
<tr><td><div> End!</div></td></tr>
</table>
另外补充table其实用css可以免去<div>这个标签也能够实现省略号效果,不过同样道理只能在ie才能出现省略号,所以这里不适用,如果你有兴趣可以睇下面我发表过既回答,见下面参考资料地址.
参考资料：http://zhidao.baidu.com/question/78317128.html
参考技术Acss3就可以实现：代码如下
<!doctype html><html>
<head>
<meta charset="utf-8">
<title>百度知道--郭凯旗</title>
<style>
#d1 text-overflow:ellipsis; /*这里有两种方式，目前默认为显示省略号...还有一个是clip意思是直接切除哪怕半个字*/
overflow:hidden; /*这里指的是多余的文本直接隐藏*/
white-space:nowrap; /*这里的意思是强制一行内显示*/
width:200px; /*容器的宽度为200px*/
</style>
</head>
<body>
<div id="d1">
这里是检验省略号的看看能不能用（这里是省略号）
</div>
</body>
</html> 参考技术B <!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">
bodyfont-size:13px;color:#8c966b;
divclear:both;width:340px;border:1px solid #333;margin:3px;padding:3px;
div acolor:#8c966b;text-decoration:none;
div a:hovertext-decoration:underline;
div adisplay:block;width:310px;white-space:nowrap;overflow:hidden;float:left;
-o-text-overflow: ellipsis; /* for Opera */
text-overflow:ellipsis; /* for IE */
div:aftercontent:"...";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>本回答被提问者采纳
以上是关于css / js 控制 文本溢出 省略号显示的主要内容，如果未能解决你的问题，请参考以下文章