Numero massimo di caratteri in un tag div/paragrafo

Question

Ho creato un "Nuovo sistema" e vorrei che la pagina iniziale mostrasse fino a 300 caratteri per articolo di notizie e aggiungere automaticamente un collegamento ipertestuale "Leggi altro" a la fine dei 300 caratteri (se necessario). Tuttavia, come lo farei?

Non so come si chiama e non sono riuscito a trovare una risposta alla mia domanda semplicemente googliando. Ho trovato domande similari, come ad esempio: Limiting the no of characters in a div has specific class Ma non si adatta perfettamente alla mia domanda.

Ecco un esempio quello che dovrebbe essere simile:

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do 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 in reprehenderit in voluptate velit esse cil ** ... Per saperne di più **

Grazie in anticipo !!

Answer 1

jQuery modo:

Se si vuole mettere a soli 300 caratteri, quindi è necessario utilizzare framework jQuery o puro Javascript.

Nota:basta cambiare #your-div-id e mettere il vostro ID div.

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

.

modo JavaScript Pure:

Nota:basta cambiare #your-div-id e mettere il vostro ID div.

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

---

Aggiungere Read More alla fine:

se si desidera aggiungere Read More alla fine di ogni paragrafo substringed, allora avete bisogno di usare puro JavaScript o jQuery modi:

jQuery way:

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

.

modo puro 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

Inoltre v'è un modo puro CSS per sottostringa testo in scatola, ma non ha alcuna possibilità di mettere manualmente limite di caratteri:

modo CSS:

È possibile raggiungere questo per puro CSS:

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

che taglierà automaticamente il testo e mettere ... alla fine della scatola.

Si noti che non limiterà il browser per inserire solo 300 caratteri. Riempirà semplicemente la scatola.

Answer 2

Hi si può provare in questo modo ....

verificare la lunghezza del div, se> 300 fare una stringa e rendere il contenuto div con stringa + "...". Aggiungi al collegamento div un listener che sostituisce tutto il contenuto del div con il contenuto originale, o semplicemente aggiungi un collegamento all'articolo completo.

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