Question

我对组件有以下要求：

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

文本被截断以适合175px高度
在截断点处需要追加“...更多”（这仍需要适合175px的高度）
点击“更多”时，内容需要扩展到完整尺寸

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

我尝试了很多库：

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

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

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

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

Answer 1

我为您要完成的工作创建了一个有效的解决方案。看看我的小提琴：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中进行了测试，它适用于所有人。

扩展具有固定高度的内容div

1 个答案: