Расширения содержания DIV с фиксированной высотой

Question

У меня есть следующие требования для компонента:

Учитывая контейнер, который содержит некоторый HTML/текст, если содержание достигает определенную высоту (например: 175px) следующие должно произойти:

• текст усекается в пределах 175px высоты
• в усечениях точки а «... Больше» должно быть добавлено (это еще нужно вписываться в 175px высоты)
• Когда " больше ", содержимое должно расширяться до его полный размер

И он должен работать во всех браузерах (включая IE)

Я пробовал несколько библиотек:

readmore.js (http://jedfoster.com/Readmore.js/) - Это один получает меня close, но ссылка «больше» добавляется как дополнительный 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; 
    } 

} 

Чтобы сократить текст, это решение проверяет высоту содержимого на начальном этапе, а затем запускает функцию усечения() и укорачивает текста одно слово в то время, с конца, пока не вписывается в максимально высота. Если текст, который вы должны сократить, заканчивается на 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, и это работает для всех.