2013-02-27 99 views
1

125個字符我有具有以下內容截斷字符串在Div元素

It is a dummy text Lorem Ipsum Iswwpe ID DFDLJLKDjlk It is a dummy text Lorem Ipsum Iswwpe ID DFDLJLKDjlk It is a dummy text Lorem Ipsum Iswwpe ID DFDLJLKDjlk <a href="#">click here</a>

我不得不修剪DIV內容到125個字符,並且具有添加在端「更多」的鏈接Div元素。我正在使用DOJO庫作爲JS庫

以下代碼用於修剪和替換爲更多鏈接。但是,長度包括<a href="#"> and </a>標籤。我不想僅獲取文本長度。

   var name= elm.innerHTML;      
       if(name.length > 125){ 
        var subtext = name.substring(125, feednamelength);name.replace(subtext , '<a href="#">More</a>'); 

       } 
+2

如果您有任何問題,請告訴我們您的代碼。 – dfsq 2013-02-27 14:03:00

+0

你不能使用css解決方案嗎?它必須是一定數量的字符嗎?看到這裏爲CSS信息https://developer.mozilla.org/en-US/docs/CSS/text-overflow – Dreamwalker 2013-02-27 14:07:28

+0

@Zonder它不會剪輯文本多達125個字符,因爲它取決於元素的寬度。 – 2013-02-27 14:10:41

回答

0

那麼,這是爲JavaScript。 Demo

function short(length) { 
    var s = document.getElementsByTagName("div"); 
    var len = s.length; 
    for(var i = 0; i < len; i++) { 
     var g = s[i].innerHTML; 
     var x = ". . . More"; 
     var leng = length-5; 
     var html = g.substring(0, leng)+""; 
     var allHTML = html+x; 
     s[i].innerHTML = allHTML; 
    } 
} 
short(125); 
0

任何理由,你爲什麼要使用JavaScript?不是每個人都啓用它。如果你有你的服務器上的PHP,你可以這麼做,

echo substr($inputText, 0, 125); 
0

我已經使用了以下css解決方案,以類似的情況。它是基於懸停而不是點擊「更多」,但表現相當好。

<style type="text/css"> 
.longtextautoexpand { 
max-width:350px; 
white-space:nowrap; 
overflow:hidden; 
text-overflow:ellipsis; 
} 
.longtextautoexpand:hover { 
overflow:visible; 
} 
</style> 

<p class="longtextautoexpand"> 
When text must stay on one line, but there is not enough room for it all, this article  provides a solution. 
</p>