根據行數而不是文本長度顯示更多/更少

Question

我已經完成了更多/更少的演出，但它基於文本的長度。會發生什麼，因爲有些角色需要比其他角色更多的空間，所以「顯示更多/更少」的單詞在不同的地方顯示，而不是總是在行尾。有時候，我得到這樣的：

提供免費行的其餘部分。

我想根據實際行數而不是文本長度來檢查它。

這裏是我有什麼，下面的代碼片段一個codePen：

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

編輯

所以@ TomHood的建議後，我現在可以有行數。但是，我仍然需要知道我要在哪裏打破文本。我不能讓一個特定生產線的最後一句話......

Answer 1

您可以通過限制在CSS的最大高度，基於該行高度做到這一點：

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

，那麼你只需要到/ jQuery的改變最大-height屬性在JavaScript

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

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

Answer 2

您可以使用下面的標記：

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

然後使用這個腳本：

$(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)*$/, '...'); 
      }); 
     } 
    }); 
}); 

這基本上是聽，看你的文字的高度超過容器，而不是使用字符數。你只需要設置你想要的height在css上.companyDetailsWrap。