Maksymalna liczba znaków w znaczniku div/akapitu

Question

Stworzyłem "Nowy system" i chciałbym, aby strona główna wyświetlała maksymalnie 300 znaków w jednym artykule i automatycznie dodawała hiperlink "Czytaj więcej" koniec 300 znaków (w razie potrzeby). Jak jednak to zrobić?

Nie wiem, jak się nazywa i nie mogłem znaleźć odpowiedzi na moje pytanie, po prostu googlowałem. Znalazłem pytania podobne do similair, takie jak: Limiting the no of characters in a div has specific class Ale to nie w pełni pasuje do mojego pytania.

Oto przykład jak to powinno wyglądać:

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed zrobić eiusmod tempor incididunt ut Labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor w przedstawicielstwie w voluptate velit esse cil ** ... Czytaj więcej **

Z góry dziękuję !!

Answer 1

jQuery sposób:

Jeśli chcesz umieścić tylko 300 znaków, wtedy należy użyć jQuery ram lub czystego Javascript.

Uwaga:wystarczy zmienić #your-div-id i umieścić div id.

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

.

Czysta droga JavaScript:

Uwaga:wystarczy zmienić #your-div-id i umieścić div id.

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

---

Dodaj Read More na koniec:

jeśli chcesz dodać Read More na końcu każdego akapitu substringed, następnie trzeba użyć czystych javascript lub jQuery sposoby:

jQuery way:

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

.

Czysta droga 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

Ponadto istnieje CSS czysty sposób podciąg tekst w polu, ale nie ma opcji, aby ręcznie umieścić limit znaków:

Sposób CSS:

Można to osiągnąć przez czystym CSS:

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

zostanie ona automatycznie wyciąć tekst i umieścić ... na końcu pola.

Należy pamiętać, że nie ograniczy to przeglądarki do umieszczenia tylko 300 znaków. To po prostu wypełni pole.

Answer 2

Hi można spróbować w ten sposób ....

Sprawdź długość div, jeżeli> 300 zrobić podciąg i uczynić zawartości div z podciągu + „...”. Dodaj do div link z detektorem, który zastąpi całą zawartość div oryginalną treścią lub po prostu dodaj link do całego artykułu.

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