Question

我有这个结构：

<div class="more desc-container">
    <div>
        Some description, which might be really long
    </div>
</div>

我有以下Javascript代码：

var ellipsestext = "...";
var moretext = "Read More";
var lesstext = "View Less";

function initializeMore() {
    this.shortText = $($(this).children("div")[0]).html();
    this.suffix = "";
    var rowNumber = 2;
    if ($(this).hasClass("desc-container")) {
        rowNumber = 4;
    }
    var textContext = $($(this).children("div")[0]);
    while (Math.floor(textContext.height() / textContext.css("lineHeight").replace("px", "")) > rowNumber) {

        this.suffix = this.shortText.substring(this.shortText.length - 1) + this.suffix;
        this.shortText = this.shortText.substring(0, this.shortText.length - 1);
        textContext.html(this.shortText);
    }

    if (this.suffix.length > 0) {
        $(this).append('<span class="moreellipses">' + ellipsestext+ '&nbsp;</span><span class="morecontent"><span>' + this.suffix + '</span>&nbsp;&nbsp;<a href="" class="morelink">' + moretext + '</a></span>');
    } 
}

function handleMoreClicks() {
    ($(this).hasClass("less") ? $(this).removeClass("less").text(moretext) : $(this).addClass("less").text(lesstext)).prev().toggle().parent().prev().toggle();
    return false;
}

//read more link
$(document).ready(function() {    

    $('.more').each(initializeMore);

    $(".morelink").click(handleMoreClicks);
});

正如您所看到的，我有一段时间具有以下条件：

Math.floor(textContext.height() / textContext.css("lineHeight").replace("px", "")) > rowNumber

始终获取height及其textContext的实际lineHeight，并将其比率与rowNumber进行比较。如果该比率高于rowNumber，则我会将字符从this.shortText迁移到this.suffix并更改html。然而，尽管这是有效的，但这是一个非常糟糕的解决方案。问题是：

是否有防弹方式可以找出需要迁移的字符数？

编辑：

因为我被要求提供一个小提琴，I have created one。我只测量了周期，结果是：211,198,191,191,196。平均为197.4毫秒。如果我们有5个这样的div来处理，那么它将使浏览器忙碌一秒钟。

如何根据行号找出字符限制？

0 个答案: