js頁碼中間變成省略號

❶ css / js 控制 文本溢出 省略號顯示

<script type="text/javascript">
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>
body{font-family:Verdana;}
p{color:#FF0099;font-size:0.78em;margin:0.5em;}

/*Sample 1*/
.textOverflow{width: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 ins{position: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._textUnderflow{overflow:auto}
.textOverflow div._textUnderflow ins{display:none;}
.textOverflow div._textOverflow{overflow:hidden;}
.textOverflow div._textOverflow ins{display:block;}
table.textOverflow{table-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才能出現省略號,所以這里不適用,如果你有興趣可以睇下面我發表過既回答,見下面參考資料地址.

❷ js 文字超出長度用省略號代替,滑鼠懸停並以懸浮框顯示

<!DOCTYPEhtml>
<html>
<head>
		<metahttp-equiv="Content-Type"content="text/html;charset=UTF-8">
		<title>
			RunJS演示代碼
		</title>
		<style>
			#content{
				text-overflow:ellipsis;
overflow:hidden;
white-space:nowrap;
				width:200px;
			}
		</style>
		<script>
			onload=function(){
				content.onmouseover=function(){
					this.title=this.innerHTML;
				}
			}
		</script>
</head>
	<body>
<divid='content'>
			js文字超出長度用省略號代替,滑鼠懸停並以懸浮框顯示
			js文字超出長度用省略號代替,滑鼠懸停並以懸浮框顯示
			js文字超出長度用省略號代替,滑鼠懸停並以懸浮框顯示
			js文字超出長度用省略號代替,滑鼠懸停並以懸浮框顯示
</div>
</body>
</html>

❸ js實現字數超出寬度自動顯示省略號

超出寬度主要是css屬性最好的
width：xx；
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
只要容器屬性有這幾個屬性，不管是css還是html或者js賦值就行

❹ js 當文字超出時顯示省略號，滑鼠移上去時緩慢滾動顯示全部。

右鍵單元格屬性，選擇自動換行試試。

❺ JS實現表格內容溢出顯示省略號

好問題.....但是....
css不更好嗎？
就目前而言，js實現幾率為0....當然你願意去做是可以的，用width/一個字元的寬度，然後得到的商是這個element的最大字元數量，但是現在的字元有些不等寬，會造成溢出或不夠。。。
文本溢出
有些時候，文本會超出一個元素，這通常稱為文本溢出，我們使用text-overflow來進行文本溢出的操作，如下：
text-overflow:[ clip | ellipsis | <string> ]{1,2}
clip 這個關鍵字的意思是"在內容區域的極限處截斷文本"，因此在字元的中間可能會發生截斷駕為了能在兩
個字元過渡處截斷，你必須使用一個空字元串值 ('')此為默認值駕
ellipsis 這個關鍵字的意思是☆用一個省略號 ('□', U+2026 HORIZONTAL ELLIPSIS)來表示被截斷的文本★駕這個
省略號被添加在內容區域中，因此會減少顯示的文本駕如果空間太小到連省略號都容納不下，那麼這個省
略號也會被截斷駕
<string> <string>用來表示被截斷的文本駕字元串內容將被添加在內容區域中，所以會減少顯示出的文本駕如果空
間太小到連省略號都容納不下，那麼這個字元串也會被截斷駕
<FULL_PAGE_VALUE> 全局值 inherit | initial | unset
純手打，求採納o(^▽^)o

❻ 如何用JS或CSS實現多行文本溢出顯示省略號

p{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden;}

可以復顯示制3行，第三行末尾變省略號