Question

我有更多/更少的节目，但它是基于文本的长度。会发生什么，因为有些角色比其他角色占用更多的空间，＆＃34;显示更多/更少＆＃34;单词显示在不同的地方，而不是总是在行的末尾。有时我得到这样的东西：

剩余部分免费。

我想根据实际行数而不是文本长度来检查。

以下是我所拥有的codePen以及代码段下方的内容：

＆＃13;

$(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();
    }

＆＃13;

#companyDetails {
    border: 1px solid red
}

.red {
    color: red
}

＆＃13;

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

＆＃13;

修改

所以在@ TomHood的建议之后，我现在可以计算行数了。但是，我仍然需要知道我要在哪里打破文本。我无法得到特定行的最后一句话......

Answer 1

您可以通过基于行高限制css中的max-height来实现此目的：

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

然后你只需要改变javascript / jQuery中的max-height属性

$('#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。

根据行数而不是文本长度显示更多/更少

2 个答案: