我創建了一個「新系統」，並且希望主頁每篇新聞文章最多顯示300個字符，並自動添加超鏈接「Read more」 300個字符的結尾（如果需要）。但是，我將如何做到這一點？div /段標記中字符的最大數量

我不知道它叫什麼，我只是通過Google搜索找不到答案。我確實發現了相似的問題，例如：Limiting the no of characters in a div has specific class但它並不完全符合我的問題。

下面是一個例子它應該是什麼樣子：

Lorem存有悲坐阿梅德，consectetur adipisicing ELIT，sed的做eiusmod tempor incididunt UT labore等dolore麥格納aliqua。請將您的評論發送給我們，我們會盡快爲您解答。 Duis aute irure dolor in rennederit in voluptate velit esse cil ** ...閱讀更多**

在此先感謝！

來源

2013-10-17 stefan1294

你不明白的鏈接？ – Praveen

上面的鏈接是你用jQuery寫的函數。 –

請執行他們在其他問題中所做的操作，或者使用https://github.com/epeli/underscore.string修剪或https://gist.github.com/mseeley/1637329 – megawac

jQuery的方法：

如果你想只放300個字符，則必須使用jQuery框架或純JavaScript。

注：只是改變#your-div-id，把你的DIV ID。

var myDiv = $('#your-div-id'); 
myDiv.text(myDiv.text().substring(0,300))

。

純JavaScript方式：

注：只是改變#your-div-id，把你的DIV ID。

，如果你想在每substringed段落的末尾添加Read More，那麼你就需要使用純JavaScript或jQuery的方式：

var i; 
var divs = document.getElementById('#your-div-id'); 
for(i=0;i<divs.length;i++) { 
    if(divs[i].className == 'myclass') { 
    divs[i].innerHTML = divs[i].innerHTML.substring(0,300); 
    } 
}

末添加Read MorejQuery方式：

var myDiv = $('#your-div-id'); 
myDiv.text(myDiv.text().substring(0,300) + '<a href="#">Read more</a>')

。

純JavaScript方式：

var i; 
var divs = document.getElementsById('#your-div-id'); 
for(i=0;i<divs.length;i++) { 
    if(divs[i].className == 'myclass') { 
    divs[i].innerHTML = divs[i].innerHTML.substring(0,300) + '<a href="#">Read more</a>'; 
    } 
}

FYI

也有一個純CSS的方式來串在框中的文本，但它沒有選擇手動將字符的限制：

CSS方式：

您可以通過純CSS實現這一點：

#your-div { 
    text-overflow:ellipsis; 
}

它會自動切斷文本，並把...在框的末尾。

請注意，它不會限制瀏覽器只能放置300個字符。它只會填滿盒子。

來源

2013-10-17 11:35:34 zur4ik

+1之類的代碼完成代碼的完整答案開機。雖然CSS答案不是真正的答案。 – TigOldBitties

@TigOldBitties我同意你的看法，只是寫了所有可能的方法來增加對'stefan1294'的瞭解 – zur4ik

非常感謝！我無法得到更好的答案。 – stefan1294

嗨，你可以嘗試這樣的....

檢查div的長度，如果> 300進行串，並在div內容與子+「...」。向div添加一個帶有偵聽器的鏈接，該偵聽器將div的所有內容替換爲原始內容，或者只是將鏈接添加到完整文章中。

var str = $('#mydiv').text(); 
if(len>300){ 
    var new_str = str.subtstr(0,300); 
    new_str += '<div data="'+str+'">' + new_str + '... </div>'; 

    var newDiv = $(new_str); 
    var link_read_more = $('<a class="read_more">Read more</a>'); 
    link_read_more.click(function(){ 
    var originaltext = $(this).parent().attr('data'); 
    $(this).parent().html(originaltext); 
    }); 
    newDiv.append(link_read_more); 
}

來源

2013-10-17 11:42:20

div /段標記中字符的最大數量

回答

jQuery的方法：

純JavaScript方式：

FYI

相關問題