JS代碼實(shí)現(xiàn)文字過(guò)長(zhǎng)時(shí)的省略界面

2012/10/19 11:05:55作者：佚名來(lái)源：網(wǎng)絡(luò)

移動(dòng)端

【實(shí)例名稱】

文字過(guò)長(zhǎng)時(shí)的省略界面

【實(shí)例描述】

有時(shí)候?yàn)榱嗽谝粋€(gè)頁(yè)面中顯示所有的新聞信息，通常只顯示內(nèi)容的一部分．然后用省略號(hào)代替后面的內(nèi)容。如果內(nèi)容是固定的，則使用HTML元素可以解決；如果數(shù)據(jù)來(lái)自數(shù)據(jù)庫(kù)，屬于動(dòng)態(tài)內(nèi)容，該如何實(shí)現(xiàn)內(nèi)容的省略呢，本例介紹如何動(dòng)態(tài)實(shí)現(xiàn)文字過(guò)長(zhǎng)時(shí)的省略界面

【實(shí)例代碼】

 
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>無(wú)標(biāo)題頁(yè)</title>
<script Language="javascript"> 
var sText="這是一段很長(zhǎng)的文本，希望通過(guò)省略號(hào)實(shí)現(xiàn)";
var content;
function OmitText()
{
   content="<nobr>" +sText +"</nobr>";
   document.getElementById("mydiv").innerHTML=content;
} 
</script>
</head>
<body>
<input type=button value=加載 onclick="OmitText()"> 
<DIV STYLE="width: 150px; height: 50px; border: 1px solid black; 
overflow: hidden; text-overflow:ellipsis" id="mydiv"> 
</DIV>
</body>
</html>

【運(yùn)行效果】

運(yùn)行效果

【難點(diǎn)剖析】

本例的重點(diǎn)是“<nobr>”標(biāo)簽，這是DHTML自帶的標(biāo)簽，用來(lái)在不換行的情況下，實(shí)現(xiàn)文本的修飾。本例中其主要功能是當(dāng)div內(nèi)的文本過(guò)長(zhǎng)時(shí)，不對(duì)文本進(jìn)行換行操作，而是以省略號(hào)替代超長(zhǎng)的文本顯示。

【源碼下載】

本實(shí)例JS代碼下載

標(biāo)簽：文字 JS代碼