title: Change line-clamp style
body: <p>I'm creating a testimonials page for my site, and some of the testimonials I have are rather long. As such I want to cut out anything longer than 3 lines.</p>
  <p>To read the rest, the user clicks a button and the text expands to reveal the rest.</p>
  <p>I've managed to do the above with <code>line-clamp</code>, however I'd like to have the <code>...</code> clickable and styled with a different text. Is this possible?</p>
  <p>I couldn't find a way to do that, so I tried a workaround. First I find out which elements have overflow so the <code>[Read More]</code> can be inserted. However it gets inserted at the end of the text, and not before the overflow.</p>
  <p>I'm clueless as to how to solve this.</p>
  <h3>Desired result:</h3>
  <p><a href="https://i.stack.imgur.com/bfGS5.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/bfGS5.png" alt="enter image description here" /></a></p>
  <p><a href="http://jsfiddle.net/6nb0wwc3/" rel="nofollow noreferrer"><strong>Current result (jsfiddle)</strong></a></p>
  <p><strong>HTML</strong></p>
  <pre><code>&lt;div class=&quot;testimonial container-fluid&quot;&gt;
      &lt;div class=&quot;col-xs-3 rating-container&quot;&gt;
          &lt;div&gt;
              &lt;div class=&quot;star&quot;&gt;&lt;/div&gt;
              &lt;div class=&quot;star&quot;&gt;&lt;/div&gt;
              &lt;div class=&quot;star&quot;&gt;&lt;/div&gt;
              &lt;div class=&quot;star&quot;&gt;&lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class=&quot;col-xs-9&quot;&gt;
          &lt;div class=&quot;title&quot;&gt;Title&lt;/div&gt;
          &lt;div class=&quot;content&quot;&gt;Lorem ipsum dolor sit amet, vero essent gubergren ad pro, regione epicuri contentiones ea mea. Decore omnium id vim, pro et malis molestie, et porro nostro vis. Ei libris debitis reprehendunt est. Te per delenit scaevola scripserit. Partem erroribus rationibus ea vel, nihil euismod ei vim.
  
              His sonet antiopam cotidieque ea, eu unum melius conclusionemque his. Ferri iisque sanctus pri ei. Ut ius tantas nonumy intellegam. Et per solum aliquam, melius elaboraret at qui.&lt;/div&gt;
          &lt;div class=&quot;name_loc&quot; id=&quot;demo&quot;&gt;Name, London&lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  <p><strong>CSS</strong></p>
  <pre><code>.testimonial {
      width: 920px;
      display: -webkit-box;
      background-color: #EFEFEF;
      color: #333;
      padding: 8px;
      margin: 0 0 20px;
      border: 3px solid #506790;
  }
  
  .testimonial:nth-of-type(even) {
      background-color: #EFEFEF;
  }
  
  .testimonial .rating-container {
      height: 144px;
      display: table;
  }
  
  .testimonial .rating-container &gt; div {
      display: table-cell;
      vertical-align: middle;
  }
  
  .testimonial .star {
      width: 32px;
      height: 32px;
      display: inline-block;
      background-repeat: no-repeat;
      background-image: url('http://www.timelinecoverbanner.com/cliparts/wp-content/digital-scrapbooking/lemon-star-md1.png');
      background-size: cover;
  }
  
  .testimonial .title {
      font-size: 18pt;
      text-align: left;
      font-weight: bold;
  }
  
  .testimonial .content {
      -webkit-box-orient: vertical;
      display: -webkit-box;
      margin: 5px 0 10px;
      font-size: 12pt;
      text-align: left;
      overflow: hidden;
      height: 68px;
  }
  
  .testimonial .name_loc {
      font-style: italic;
      font-size: 12pt;
      text-align: right;
  }
  </code></pre>
  <p><strong>JS</strong></p>
  <pre><code>$('#demo').on('click', function() {
      var t = $(this).closest('.testimonial');
      var c = t.find('.content');         
      var h3 = c[0].scrollHeight;             
      c.animate({'height':h3},500);
  });
  
  $('.testimonial').each(function() {
      var c = $(this).find('.content');       
      if (c.height() &lt; c[0].scrollHeight) {
          c.css('text-overflow', 'ellipsis');
          //also tried:
          c.css('line-clamp', '3');
      }
  });
  </code></pre>