title: Show more/less based on number of lines instead of text length
body: <p>I have the show more/less done but it's based on the length of the text. What happens is, as there are characters that take more space than others, the "show more/less" words show in different places, not always at the end of the line. Sometimes I get something like this:</p>
  
  <p><a href="https://i.stack.imgur.com/eISbK.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/eISbK.png" alt="show more"></a></p>
  
  <p>With the rest of the line free.</p>
  
  <p>I want to check this based on the actual number of lines instead of the text length.</p>
  
  <p>Here's a <a href="http://codepen.io/anon/pen/MKPYPw" rel="nofollow noreferrer">codePen</a> of what I've got and below a code snippet:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$(document).ready(function() {
      function splitText(text) {
          var textBreak = textLimit;
          var first = text.substring(0, textBreak);
          var second = text.substring(textBreak);
          var aux = second.substring(0, second.indexOf(" "));
          var spaceIndex = second.indexOf(" ");
          second = " " + second.substring(spaceIndex + 1);
          first = first.substring(0, textBreak) + aux;
          var bothTextes = [first, second];
          return bothTextes;
      }
  
  
  
      var textLimit = 400;
      var text = $("#companyDetails").html();
  
  
      if (text.length &gt; textLimit) {
          var textArray = splitText(text);
          $("#companyDetails").text(textArray[0]);
          $("#companyDetails").append("&lt;span onclick=\"expandText()\" class='show-more'&gt;...&lt;span class=\"red\"&gt;show more&lt;/span&gt;&lt;/span&gt;");
          $("#companyDetails").append("&lt;span style=\"display: none\" class='rest-of-description'&gt;" + textArray[1] + "&lt;/span&gt;");
          $("#companyDetails").append("&lt;span onclick=\"collapseText()\" style=\"display: none\" class='red show-less'&gt; show less &lt;/span&gt;");
      } else {
          $("#companyDetails").text(text);
      }
  });
  
      function expandText() {
          $(".rest-of-description").show();
          $(".show-less").show();
          $(".show-more").hide();
      }
  
      function collapseText() {
          $(".rest-of-description").hide();
          $(".show-less").hide();
          $(".show-more").show();
      }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#companyDetails {
      border: 1px solid red
  }
  
  .red {
      color: red
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;div id="companyDetails"&gt;
      We at ACME offer the services to cater for all your stuff needs. As part of the ACME Inc. network we utilise 10000000 years experience of market leading in nice services. In 2015, ACME was acquired by the ACME Group, a division of Associated ACME Ltd. By
      joining forces it gives us access to extensive new resources allowing us to succeed further in attracting the highest calibre of cartoon stuff. Being a specialist site with a full range of positions across the world, ACME provides our guys with a
      choice that enables us to attract the best in the industry. Our dedicated team are here to make sure we continue to provide the best service to you every time. Whether you're looking to catch roadrunner or simply to have a foldable airplane that you
      can fit into your pocket after flying, ACME is the company you are looking for. I case you didn't read, here it is again: We at ACME offer the services to cater for all your stuff needs. As part of the ACME Inc. network we utilise 10000000 years experience of market leading in nice services. In 2015, ACME was acquired by the ACME Group, a division of Associated ACME Ltd. By
      joining forces it gives us access to extensive new resources allowing us to succeed further in attracting the highest calibre of cartoon stuff. Being a specialist site with a full range of positions across the world, ACME provides our guys with a
      choice that enables us to attract the best in the industry. Our dedicated team are here to make sure we continue to provide the best service to you every time. Whether you're looking to catch roadrunner or simply to have a foldable airplane that you
      can fit into your pocket after flying, ACME is the company you are looking for.
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p><strong>EDIT</strong></p>
  
  <p>So after @TomHood's suggestion, I can now have the line count. However, I still need to know where am I going to break the text. I can't get the final word of a specific line...</p>