Maximale Anzahl von Zeichen in einem div/Absatz-Tag

Question

Ich habe ein "Neues System" erstellt und möchte, dass die Startseite bis zu 300 Zeichen pro Nachrichtenartikel anzeigt und einen Hyperlink "Mehr dazu" automatisch anfügt das Ende der 300 Zeichen (falls benötigt). Wie würde ich das tun?

Ich weiß nicht, wie es heißt, und ich konnte keine Antwort auf meine Frage finden, nur durch googeln. Ich fand ähnliche Fragen wie: Limiting the no of characters in a div has specific class Aber es passt nicht ganz zu meiner Frage.

Hier ist ein Beispiel, wie es aussehen sollte:

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed tun eiusmod ut tempor incididunt labore et dolore magna aliqua. En en en ven ven ven ven ven ven ven ven ven ven ven ven ven ven ven ven ven ven ven ven ven ven ven ven ven ven ven ven ven ven ven ven ven ven ven ven ven ven ven ven ven ven ven ven ven ven ven ven ven ven ven ven ven ven ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul Duis aute irre dolor in represenderit in voluptate velit esse cil ** ... Lesen Sie mehr **

Vielen Dank im Voraus !!

Answer 1

jQuery Weg:

Wenn Sie nur 300 Zeichen setzen, dann müssen Sie jQuery Framework oder reine Javascript verwenden.

Hinweis:nur #your-div-id und setzen Sie Ihre div-ID ändern.

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

.

reine JavaScript Art und Weise:

Hinweis:nur #your-div-id und Ihre div ID setzen ändern.

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); 
    } 
} 

---

hinzufügen Read More am Ende:

wenn Sie Read More am Ende jedes substringed Absatz hinzufügen möchten, dann müssen Sie reine Javascript oder jQuery Möglichkeiten nutzen:

jQuery weg:

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

.

reine JavaScript Art und Weise:

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

gibt auch eine reine CSS Art und Weise Text in Feld String, aber es hat keine andere Wahl manuell Zeichenbegrenzung gestellt:

CSS Weg:

Sie können dies durch reine CSS erreichen:

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

es wird automatisch Text geschnitten und ... am Ende der Box.

Bitte beachten Sie, dass der Browser nicht auf 300 Zeichen beschränkt wird. Es wird nur die Box füllen.

Answer 2

Hallo du so versuchen ....

die Länge des div Überprüfen Sie, wenn> 300 eine Teil und machen den div Inhalt mit Teilzeichenfolge + „...“ zu machen. Fügen Sie dem div einen Link mit einem Listener hinzu, der den gesamten Inhalt des div durch den ursprünglichen Inhalt ersetzt, oder fügen Sie einfach einen Link zum vollständigen Artikel hinzu.

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); 
}