Реалізація переповнення тексту та функції Показати більше/менше в HTML та CSS - javascript.org.ua

Давайте навчимося реалізовувати обрізання тексту з динамічною функцією "See More/See Less" за допомогою HTML, CSS і JavaScript.

Фото від Growtika на Unsplash

Давайте зрозуміємо сценарій використання

Не так давно я зіткнувся з ситуацією, де потрібно було відобразити текст всередині одного з HTML елементів. Умови були наступні:

Я можу показати максимум три рядки тексту за раз.
Після 3 рядків потрібно було обробляти переповнення тексту за допомогою еліпсиса та посилання "See More". Коли "See More" натискали, весь текст показувався разом з посиланням "See Less". Коли натискали "See Less", ми знову повинні були показувати 3 рядки і посилання "See More".

HTML структура

<div id="content">
    <div id="text" class="text-clip">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
    </div>
    <a id="expand-link" href="#">See More</a>
</div>

Як встановити обмеження на кількість рядків?

#content {  
    max-width: 400px; /* Потрібно для того, щоб переповнення спрацювало */  
}  
.text-clip {  
    display: -webkit-box;  
    -webkit-line-clamp: 3; /* Кількість рядків, які потрібно відобразити */  
    -webkit-box-orient: vertical;  
    overflow: hidden;  
    text-overflow: ellipsis;  
    white-space: normal;  
}

Як дізнатися, чи потрібен лінк "See More"?

Якщо текст перевищує 3 рядки, то тільки тоді потрібен лінк "See More". Тому як ми можемо дізнатися, що перевищили 3 рядки? Ми вже обрізаємо переповнення за допомогою еліпсиса, тому контент завжди буде мати максимум 3 рядки.

Я використав два чудових властивості — scrollHeight і offsetHeight.

Що таке scrollHeight?

scrollHeight елемента — це властивість в JavaScript, яка представляє загальну висоту контенту елемента, включаючи вміст, який не є видимим у межах вікна елемента через переповнення.

Що таке offsetHeight?

offsetHeight елемента — це властивість в JavaScript, яка представляє загальну висоту елемента, включаючи його видимий вміст, паддінг і кордони. Вона не включає відступи або невидимий вміст, що не відображається в межах контейнера елемента.

Читая визначення цих двох властивостей, я зрозумів, що якщо текст переповнює, scrollHeight буде більшим за offsetHeight, оскільки враховується загальна висота, включаючи переповнений контент.

Зображення, що показує UX переповнення тексту

Як відображати "See More" або "See Less"?

const content = document.getElementById("content");  
const text = document.getElementById("text");  
const expandLink = document.getElementById("expand-link");  

expandLink.addEventListener("click", (event) => {  
    if (expandLink.textContent === "See More") {  
        expandLink.textContent = "See Less";  
        text.classList.remove("text-clip");  
    } else {  
        expandLink.textContent = "See More";  
        text.classList.add("text-clip");  
    }  
});  

// Як виявити, що текст переповнює / активний еліпсис?

if (text.scrollHeight > content?.offsetHeight) {  
    expandLink.style.display = "block";  
} else {  
    expandLink.style.display = "none";  
}

Я також додав посилання на CodeSandbox, якщо ви хочете побачити повну реалізацію.

Дякую за увагу! Не соромтесь поділитись думками або запитаннями в коментарях 😄

Перекладено з: Implementing Text Overflow and Show More/Less in HTML & CSS