javascript - Line clamping and unclamping, onclick event of Link -

i'd handle text in <p> tag in following way

1. i using line clamping @ css shrink 3 lines.
2. the text in paragraph tag "p" long, , hence has more link "show all" appended @ end of clamp restricted size line.
3. on clicking on "show all" link, clamped text should unclamp , display entire text "show all" link should disappear.

here i've tried. highly appreciated.

<div id="id_1" class="clamp clamp-3"> <p>lorem ipsum dolor sit amet, consectetur adipiscing  elit. ut suscipit libero metus, ac suscipit est iaculis  sit amet.suspendisse potenti. ut ut auctor nisi, ut varius ligula.  vestibulum ante ipsum primis in faucibus orci luctus et ultrices  posuere cubilia curae; proin quis imperdiet velit. etiam tincidunt  ut tortor ut pellentesque. cras laoreet convallis arcu,  vel mollis sem pharetra ut. nam leo lorem, vestibulum id velit  ac, pulvinar pretium libero. praesent facilisis lectus @  nunc ultricies dictum. fusce iaculis nibh ut massa facilisis, sed rutrum metus elementum. nulla eget tellus @ leo  consectetur ultricies non eget purus. integer ut finibus  neque. vestibulum pretium tortor in leo porta finibus.  pellentesque rutrum nisl @ risus egestas finibus. </p> </div> 

************ css ************

 .clamp {  display: -webkit-box;  -webkit-box-orient: vertical;   overflow: hidden;  }   .unclamp { -webkit-line-clamp: initial !important; }  .clamp-3 { -webkit-line-clamp: 3; } 

***** javascript ***************

define(["jquery", "domready!"], function($){  $('.clamp').each(function() {    var showall = $('<a href="#" >show all</a>');    $(this).after(showall);     showall.on("click", function (){        $(this).prev().addclass("unclamp");     }); }); }); 

this half baked code able clamp 3 lines using css class clamp , clamp-3 have following issues
******* issues ***********

1. the "show all" not getting appended end of clamped line, instead it's jumping on next line , needs right aligned.
2. how make "show all" disappear after "show all" link has been clicked , hence text expanded.

you use standard css properties (not --webkit specific) , use max-height of 3x line-height.

i controlling "show more/less" text css.

(function(){    $('.clamp').each(function() {     var showall = $('<a href="#" class="clamp-toggle"></a>');     $(this).after(showall);       showall.on("click", function (){         $(this).prev().toggleclass("unclamp");       });  });  })();

.clamp {   display: block;   -webkit-box-orient: vertical;    overflow: hidden;   line-height: 1.2em;  }    .clamp p {    padding: 0;    margin: 0;  }    .clamp.unclamp { max-height: initial; }  .clamp-3 { max-height: 3.6em; }    .clamp + .clamp-toggle::before {    content: "show all...";    float: right;  }  .clamp.unclamp + .clamp-toggle::before { content: "show less..."; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>  <div id="id_1" class="clamp clamp-3">  <p>lorem ipsum dolor sit amet, consectetur adipiscing   elit. ut suscipit libero metus, ac suscipit est iaculis   sit amet.suspendisse potenti. ut ut auctor nisi, ut varius ligula.   vestibulum ante ipsum primis in faucibus orci luctus et ultrices   posuere cubilia curae; proin quis imperdiet velit. etiam tincidunt   ut tortor ut pellentesque. cras laoreet convallis arcu,   vel mollis sem pharetra ut. nam leo lorem, vestibulum id velit   ac, pulvinar pretium libero. praesent facilisis lectus @   nunc ultricies dictum. fusce iaculis nibh ut massa facilisis,  sed rutrum metus elementum. nulla eget tellus @ leo   consectetur ultricies non eget purus. integer ut finibus   neque. vestibulum pretium tortor in leo porta finibus.   pellentesque rutrum nisl @ risus egestas finibus.  </p>  </div>