Show more/less based on number of lines instead of text length

Question

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:

With the rest of the line free.

I want to check this based on the actual number of lines instead of the text length.

Here's a codePen of what I've got and below a code snippet:

$(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 > textLimit) {
        var textArray = splitText(text);
        $("#companyDetails").text(textArray[0]);
        $("#companyDetails").append("<span onclick=\"expandText()\" class='show-more'>...<span class=\"red\">show more</span></span>");
        $("#companyDetails").append("<span style=\"display: none\" class='rest-of-description'>" + textArray[1] + "</span>");
        $("#companyDetails").append("<span onclick=\"collapseText()\" style=\"display: none\" class='red show-less'> show less </span>");
    } 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();
    }

#companyDetails {
    border: 1px solid red
}

.red {
    color: red
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="companyDetails">
    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.
</div>

EDIT

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

Answer 1

You can do this by restricting the max-height in css, based on the line-height:

#companyDetails {
    border: 1px solid red;
  line-height: 1.2em;
  max-height: 4.8em; //4.8 = 4 lines
  overflow: hidden;
}

then you just need to change the max-height property in javascript/jQuery

$('#showMore').click(function(){
  $('#companyDetails').css('max-height', 'none');
});

http://codepen.io/anon/pen/KVGpwd

Answer 2

You could use the following markup:

<div class="companyDetailsWrap">
  <p class="companyDetailsText">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.</p>
</div>

Then use this script:

$(function () {
    var initial = $('.companyDetailsText').text();

    $('.companyDetailsText').text(initial);
    while($('.companyDetailsText').outerHeight() > $('.companyDetailsWrap').height()) {
        $('.companyDetailsText').text(function(index, text) {
            return text.replace(/\W*\s(\S)*$/, '...');
        });
    }

    $(window).resize(function() {
        $('.companyDetailsText').text(initial);
        while($('.companyDetailsText').outerHeight() > $('.companyDetailsWrap').height()) {
            $('.companyDetailsText').text(function(index, text) {
                return text.replace(/\W*\s(\S)*$/, '...');
            });
        }
    });
});

This is basically listening to see if the height of your text exceeds the container, rather than using character count. You will just need to set your desired height in css on .companyDetailsWrap.