Eu tenho parágrafo que tem mais de 500 caracteres. Eu quero apenas 100 caracteres iniciais e esconder o resto. Também quero inserir o link "Mais" ao lado de 100 caracteres. Ao clicar em mais link inteiro, o parágrafo deve exibir e editar o texto "Mais" para "Menos" e, ao clicar em "Menos", deve alternar o comportamento. Parágrafo é gerado dinamicamente Eu não posso embrulhar o conteúdo dele usando .wrap (). Aqui está o exemplo que eu tenho e o que eu quero.

Isso é o que eu tenho:

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

Isto é o que eu quero quando DOM carrega

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

Isto é o que eu quero quando o usuário clicar em "Mais"

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

Quando clicamos em "Menos", ele deve reverter o que um clique "Mais" fez.

Eu estou usando jQuery para dividir, cortar e envolver substring em span que eu quero esconder, mas isso não funciona.

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