Іноді доводиться обмежувати довгий текст, наприклад, у блоці з фіксованими розмірами, щоб текст не виходив за межі цього блоку. Часто робиться так: текст, який не поміщається в задані розміри, обрізається, а в кінці тексту додається крапка. Воно підказує користувачеві, що текст відображається лише частково.
Спосіб обрізання тексту залежить від довжини та числа рядків.
Однорядковий текст
Для одного рядка є спеціальна властивість text-overflow зі значенням ellipsis, яке додає крапку в кінці тексту. Щоб ця властивість працювала, потрібно дотриматися ще двох умов.
- Текст повинен виводитися в один рядок без переносів. Для заборони переносів ми використовуємо властивість white-space зі значенням nowrap. Текст за межами блоку ховається від перегляду за допомогою властивості overflow зі значенням hidden.
Комбінуючи три властивості white-space, overflow та text-overflow отримаємо обрізаний рядок з трьома крапками в кінці (приклад 1).
Приклад 1. Використання text-overflow
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Обрізання рядка</title> <style> .truncate { background: #f4eddf; /* Колір тла */
padding: 10px; /* Поля навколо тексту */
white-space: nowrap; /* Текст не переноситься */
overflow: hidden; /* Обрізаємо все поза блоком */
text-overflow: ellipsis; /* Додаємо крапку */
}
</style>
</head>
<body> <div class="truncate">На вулицях і пустирях хлопчики запускають повітряних зміїв, а дівчатка грають дерев'яними ракетками з багатобарвними малюнками в хане.</div>
</body>
</html>Результат цього прикладу показаний на рис. 1.
Мал. 1. Вид обрізаного однорядкового тексту
Багаторядковий текст
Обмеження кількох рядків є складнішим завданням, яке потребує застосування цілого набору нестандартних і застарілих властивостей. Нам знадобиться таке.
- Властивість -webkit-line-clamp, яка обмежує кількість рядків. Значення 3 відобразить три рядки, значення 4 — чотири рядки.
- Властивість display зі значенням -webkit-box.
- Властивість -webkit-box-orient зі значенням vertical.
- Властивість overflow зі значенням hidden, воно приховує текст за межами блоку.
Зверніть увагу, що в більшості випадків ми маємо справу не зі стандартними стильовими властивостями, а додаємо до них префікс-webkit-. При цьому всі ці властивості з префіксами працюють навіть у Firefox.="var">display: flex. Аналогічно застаріло і -webkit-box-orient: vertical, зараз замість нього застосовується flex-direction: column. При цьому не можна просто замінити застарілі властивості сучасними, перестане працювати обмеження рядків. до висоті рядків, у результаті відображається частина зайвого рядка. Щоб цього уникнути, можна явно задати висоту блоку або вкласти один блок всередину іншого. У прикладі 3 властивість padding застосовується до <div>, а набір властивостей для обмеження тексту до <p>.
Приклад 2. Використання-webkit-line-clamp
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Обрізання рядка</title> <style> .truncate { background: #f4eddf; /* Колір тла */
padding: 10px; /* Поля навколо тексту */
}
.truncate p { margin: 0; /* Забираємо зовнішній відступ */
-webkit-line-clamp: 2; /* Число рядків, що відображаються */
display:-webkit-box; /* Включаємо флексбокси */
-webkit-box-orient: vertical; /* Вертикальна орієнтація */
overflow: hidden; /* Обрізаємо все поза блоком */
}
</style>
</head>
<body> <div class="truncate"><p>На вулицях і пустирях хлопчики запускають повітряних зміїв, а дівчатка грають дерев'яними ракетками з багатобарвними малюнками в хане. Крім цього, тут є найцінніші колекції мексиканських масок, бронзові та кам'яні статуї з Індії та Цейлону, бронзові барельєфи та статуї, створені майстрами Екваторіальної Африки п'ять-шість століть тому.</p></div>
</body>
</html>Результат цього прикладу показаний на рис. 2.
Мал. 2. Вид обрізаного багаторядкового тексту
Зверніть увагу, що тут нам не потрібен text-overflow, багатокрапка додається через властивість -webkit-line-clamp.
Використання JavaScript
Якщо не хочеться зв'язуватися зі застарілими властивостями, завжди можна скористатися JavaScript для вирішення нашого завдання. Бібліотека Clamp.js дозволяє вибрати алгоритм роботи — за допомогою -webkit-line-clamp, у цьому випадку застосовується набір властивостей із прикладу 2 або шляхом явного обрізання рядка (приклад 3).
Приклад 3. Використання Clamp.js
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Обрізання рядка</title> <style> .truncate { background: #f4eddf; padding: 10px; }
.truncate p { margin: 0; }
</style>
</head>
<body> <div class="truncate"><p>На вулицях і пустирях хлопчики запускають повітряних зміїв, а дівчатка грають дерев'яними ракетками з багатобарвними малюнками в хане. Крім цього, тут є найцінніші колекції мексиканських масок, бронзові та кам'яні статуї з Індії та Цейлону, бронзові барельєфи та статуї, створені майстрами Екваторіальної Африки п'ять-шість століть тому.</p></div> <script src="https://cdnjs.cloudflare.com/ajax/libs/Clamp.js/0.5.1/clamp.min.js"></script> <script> //Вибираємо всі елементи <p> всередині класу .truncate var truncate=document.querySelector(".truncate p"); $clamp(truncate, { clamp: 3, //Кількість рядків useNativeClamp: false //НЕ використовуємо-webkit-line-clamp });
</script>
</body>
</html>Зверніть увагу на параметр useNativeClamp. За промовчанням його значення дорівнює true, у цьому випадку до елемента додається властивість -webkit-line-clamp. Якщо вказати значення false, тоді рядок обрізається явно. Між цими алгоритмами Clamp.js є невелика різниця, яка помітна при зміні розміру вікна браузера. Використання useNativeClamp:true обрізає рядок лише за необхідності, коли він перевищує три рядки. useNativeClamp:false обрізає завжди і при зміні розмірів блоку рядок так і залишається обрізаним.