Javascript 使用固定高度扩展内容div

我对组件有以下要求：

给定包含一些html/文本的容器，如果内容达到指定高度（例如：175px），则需要执行以下操作：

• 文本将被截断以适应175px的高度
• 在截断点，需要添加“…更多”（这仍然需要适合175px的高度）
• 单击“更多”时，内容需要扩展到其完整大小

它需要在所有浏览器（包括IE）中运行

我尝试了许多库：

readmore.js（） -这一个让我很接近，但是“more”链接作为一个额外的div附加在main content div之后，而不是文本断点的末尾

clamp.js（） -这会在指定的高度添加“…”，但不会添加可单击的更多链接，该链接可能会扩展，并且在IE中运行时会出现问题

DotjQuery插件-与Clamp相同的问题

---

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

我为您试图实现的目标创建了一个有效的解决方案。在这里查看我的小提琴：

JS

要缩短文本，此解决方案首先检查内容高度，然后运行truncate（）函数，并从结尾开始一次将文本缩短一个单词，直到它符合最大高度。如果您必须缩短的文本长度最终达到10000字，这将不是最好的方法，但我不确定您的用例

HTML

Lorem ipsum dolor sit amet，奉献精英。Nam suscipit，最早的发明者totam Voluptate，他是一位杰出的劳动发明者，他解释说，他是一位伟大的发明家。在普通劳动中，人身权利的区分是不可分割的，是暂时性的。我的心，我的劳动，我的心，我的心，我的心，我的心，我的心，我的心，我的心，我的心，我的心，我的心，我的心，我的心，我的心，我的心，我的心！

我还在IE9、10、Chrome和FF中测试了它，它适用于所有人

可能重复的

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

}

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