Ich habe einen Absatz mit mehr als 500 Zeichen. Ich möchte nur die ersten 100 Zeichen bekommen und den Rest davon verstecken. Außerdem möchte ich den Link "Mehr" neben 100 Zeichen einfügen. Wenn Sie auf einen weiteren Link klicken, sollte der gesamte Absatz den Text "More" (Mehr) in "Less" (Weniger) anzeigen und bearbeiten. Wenn Sie auf "Less" (Weniger) klicken, sollte das Verhalten umgeschaltet werden. Der Absatz wird dynamisch generiert. Ich kann den Inhalt nicht mit .wrap () umbrechen. Hier ist ein Beispiel, was ich habe und was ich will.

Das habe ich:

  <p>It is a long established fact that a reader will be distracted by the readable 
   content of a page when looking at its layout. The point of using Lorem Ipsum is that
   it has a more-or-less normal distribution of letters, as opposed to using 'Content 
  content here', making it look like readable English. Many desktop publishing packages 
   and web page editors now use Lorem Ipsum as their default model text.</p>

Dies ist, was ich will, wenn DOM geladen wird

 <p>It is a long established fact that a reader will be distracted by ..More</p>

Dies ist, was ich möchte, wenn der Benutzer auf "Mehr" klickt.

   <p>It is a long established fact that a reader will be distracted by the readable 
   content of a page when looking at its layout. The point of using Lorem Ipsum is that
   it has a more-or-less normal distribution of letters, as opposed to using 'Content 
  content here', making it look like readable English. Many desktop publishing packages 
   and web page editors now use Lorem Ipsum as their default model text. ..Less</p>

Wenn wir auf "Weniger" klicken, sollte das zurückgesetzt werden, was durch Klicken auf "Mehr" geschehen ist.

Ich verwende jQuery, um einen Teilstring zu teilen, zu schneiden und in einen Span zu wickeln, den ich verbergen möchte, aber das funktioniert nicht.

var title = $("p").text();
var shortText = jQuery.trim(title).substring(100, 1000).split(" ")
    .slice(0, -1).join(" ") + "...More >>";
shortText.wrap('</span>');