Tengo el párrafo que tiene más de 500 caracteres. Solo quiero obtener 100 caracteres iniciales y ocultar el resto. También quiero insertar el enlace "Más" junto a 100 caracteres. Al hacer clic en el enlace, todo el párrafo debe mostrar y editar el texto "Más" a "Menos" y al hacer clic en "Menos", debe cambiar el comportamiento. El párrafo se genera dinámicamente. No puedo ajustar el contenido de él usando .wrap (). Aquí hay un ejemplo de lo que tengo y lo que quiero.

Esto es lo que tengo :

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

Esto es lo que quiero cuando se carga DOM

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

Esto es lo que quiero cuando el usuario haga clic en "Más"

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

Cuando hacemos clic en "Menos", debería revertir lo que ha hecho al hacer clic en "Más".

Estoy usando jQuery para dividir, dividir y envolver la subcadena en el intervalo que quiero ocultar, pero eso no funciona.

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