javascript - 以固定高度扩展内容 div

Question

我对组件有以下要求:

给定一个包含一些 html/文本的容器，如果内容达到指定的高度(例如:175 像素)，则需要发生以下情况:

• 文本被 chop 以适应 175 像素的高度
• 在 chop 点需要附加一个“...更多”(这仍然需要适合 175 像素的高度)
• 点击“更多”时，内容需要展开到完整大小

并且需要在所有浏览器(包括IE)中运行

我试过很多库:

readmore.js ( http://jedfoster.com/Readmore.js/ ) - 这让我很接近，但是“更多”链接作为一个额外的 div 附加在主要内容 div 之后，而不是在文本断点的末尾。

clamp.js ( https://github.com/josephschmitt/Clamp.js/ ) - 这会在指定高度添加“...”，但不会添加可展开的可点击更多链接，并且在 IE 中运行时会出现问题

dotdotdot jQuery 插件 - 与 Clamp 相同的问题

做这样的事情我有什么选择？有什么方法可以避免字体/像素数学？

Answer 1

我为您要实现的目标创建了一个可行的解决方案。在这里查看我的 fiddle :https://jsfiddle.net/akm1essL/5/ .

JS

var container = document.getElementById('container');
var myText = container.getElementsByClassName('text-content')[0];
var spanEl = myText.childNodes[0];
var originalStr = myText.textContent.toString();
var truncatedStr;

// create the "More button" to be appended
var moreButton = document.createElement('span');
moreButton.setAttribute('class', 'readMore');
moreButton.setAttribute('id', 'moreButton');

checkHeight();

function checkHeight() {
    var maxHeight = 170;
    if (myText.clientHeight > maxHeight) {
        truncate();
    }
}

function truncate() {
    var str, hasButton;
    if (!hasButton) {
        myText.appendChild(moreButton);
        setButton("more");
        hasButton = true;
    }

    str = myText.textContent;
    truncatedStr = str.slice(0, str.lastIndexOf(' '));
    spanEl.textContent = truncatedStr;

    checkHeight(myText.clientHeight);
}

function showFull() {
    spanEl.textContent = originalStr;
    setButton();
}

function showTruncated() {
    spanEl.textContent = truncatedStr;
    setButton("more");
}

function setButton(display) {
    var btn = document.getElementById("moreButton");
    if (display === "more") {
        btn.textContent = "...More";
        btn.addEventListener("click", showFull);
        btn.removeEventListener("click", showTruncated);
    } else {
        btn.textContent = "...Less";
        btn.removeEventListener("click", showFull);
        btn.addEventListener("click", showTruncated);
        hasButton = false;
    }

}

为了缩短文本，此解决方案首先检查内容高度，然后运行 ​​truncate() 函数并从末尾一次一个单词地缩短文本，直到它适合最大高度。如果您必须缩短的文本最终达到 10,000 字长，这将不是最佳方法，但我不确定您的用例。

HTML

<div id="container">
    <p class="text-content">
        <span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nam suscipit, labore nemo distinctio incidunt laboriosam, est inventore totam voluptatem explicabo unde eius et. Provident harum, dolor tempora, aut consectetur excepturi. Dolorem aperiam distinctio ratione quam saepe eius ex, quasi, corporis molestias at laborum commodi, quis voluptatum possimus temporibus. Earum quis, et laudantium labore maxime fuga numquam explicabo!</span>
    </p>
</div>

我还在 IE9、10、Chrome 和 FF 中对其进行了测试，它适用于所有版本。