Запознайте се с удобна CSS техника, която можете да използвате, за да скриете съдържание и да го разкриете при поискване.
Ограничаването на количеството текст в елемент е често срещано изискване за уеб дизайн. Често ще видите статия с три- или четириредов откъс с бутон, който ви позволява да разширите пълния текст.
Можете да създадете този дизайн, като използвате комбинация от CSS и JavaScript. Но можете също да го направите, като използвате само CSS. Открийте два начина за ограничаване на текста в поле и как можете да създадете бутон за динамично разширяване, като използвате само CSS.
Техниката Webkit
Създайте празна папка и редактирайте два файла в нея: index.html и style.css. Вътре в index.html файл, създайте HTML скелет:
html>
<htmlезик="bg"><глава>
<заглавие>Документзаглавие>
<връзкаотн="стилов лист"href="style.css">
глава><тяло>
тяло>
html>
Връзка в раздел, към style.css файл, гарантира, че всеки CSS, който добавите към този файл, ще се приложи към тази страница. След това поставете следното HTML маркиране в рамките на тагове в index.html:
<разделклас="група карти">
<статияклас="карта">
<h2>член 1h2><стрклас="изрязан текст">
Тук влиза текст от 300 думи
стр><входТип="кутия за отметка"клас="разширяване-btn">
статия><статияклас="карта">
<h2>член 2h2><стрклас="изрязан текст">
Тук влиза текст от 200 думи
стр><входТип="кутия за отметка"клас="разширяване-btn">
статия><статияклас="карта">
<h2>член 1h2><стрклас="изрязан текст">
Тук влиза текст от 100 думи
стр>
<входТип="кутия за отметка"клас="разширяване-btn">
статия>
раздел>
Структурата на този HTML е проста, но все още използва семантично маркиране за достъпност. Елемент раздел съдържа три елемента статия. Всяка статия се състои от заглавие, параграф и входен елемент. Ще използвате CSS, за да оформите всеки раздел на статия в карта.
Междувременно вашата страница ще изглежда така:
От изображението по-горе можете да видите различна дължина на текста във всеки параграф. 300 думи в първия, 200 думи във втория и 100 в третия.
Следващата стъпка е да започнете да оформяте страницата, като добавите CSS към style.css файл. Започнете, като нулирате рамката на документа и дадете на тялото бял фонов цвят:
*, *::преди, *::след {
оразмеряване на кутията: гранична кутия;
}
тяло {
заден план: #f3f3f3;
препълване: скрит;
}
След това превърнете елемента с класа на група карти в мрежов контейнер с три колони. Всеки раздел на статията заема колона:
.card-group {
дисплей: решетка;
grid-template-colons: повторете(3, 1фр);
празнина: .5rem;
подравняване на елементи: гъвкав старт;
}Оформете всеки раздел на статия като карта с бял фон и черна, леко кръгла граница:
.карта {
заден план: бяло;
подплата: 1рем;
граница: 1pxтвърдочерен;
граница-радиус: .25em;
}Накрая добавете малко полета:
h2, стр {
марж: 0;
}
h2 {
margin-bottom: 1рем;
}
Запазете файла и проверете браузъра си. Страницата трябва да изглежда като страницата, показана на изображението по-долу:
Следващата стъпка е да намалите броя на редовете за всеки текст до 3. Ето CSS за това:
.cuttoff-текст {
--максимални линии: 3;
препълване: скрит;
дисплей: -webkit-кутия;
-webkit-box-ориент: вертикален;
-webkit-line-clamp: вар(--максимални линии);
}
Започнете с настройка CSS променлива, макс. редове, до 3 и скриване на преливащо съдържание. След това настройте дисплея на -webkit-кутия и затегнете линията до 3.
Следното изображение показва резултата. Всяка карта показва елипса на третия ред текст:
Тази техника може да бъде доста трудна за изпълнение. Ако пропуснете някое свойство, тогава всичко ще се счупи. Друг недостатък е, че не можете да използвате свойство за показване, различно от --webkit-box. Например, може да искате използвайте Grid или Flexbox. Поради тези причини следната техника е по-добра.
По-гъвкав подход за ограничаване на броя на редовете в текста
Тази техника ви позволява да правите същото като подхода на webkit, със същите резултати. Но голямата разлика е, че имате много гъвкавост, защото сами задавате височината. Освен това можете да използвате всяко свойство за показване или каквато и да е опция за стилизиране, която предпочитате.
За да започнете, заменете CSS блока за .cutoff-текст с тази:
.cuttoff-текст {
--максимални линии: 5;
--височина на линията: 1.4;
височина: калк(вар(--максимални линии) * 1ем * вар(--височина на линията));
височина на линията: вар(--височина на линията);
позиция: роднина;
}Задаването на височина на линията е важно, защото трябва да я вземете предвид, когато определяте височината си. За да получите височината, умножете височината на реда по размера на шрифта и броя на редовете.
Ние добавяме позиция: относителна свойство, защото имаме нужда от него, за да добавим ефекта на избледняване. Добавете следния CSS, за да завършите ефекта:
.cuttoff-текст::преди {
съдържание: "";
позиция: абсолютен;
височина: калк(2ем * вар(--височина на линията));
ширина: 100%;
отдолу: 0;
показалец-събития: нито един;
заден план: линеен градиент(да сеотдолу, прозрачен, бяло);
}Горният CSS замъглява последния ред текст във всяка карта. Можете да постигнете ефект на избледняване, като използвате заден план свойство и градиент. Трябва да зададете показалец-събития да се нито един за да се гарантира, че елементът не може да се избира.
Ето резултата:
Тази техника постигна същия резултат като предишната (плюс размазването в края). Но вие получавате повече гъвкавост за използване на други видове оформления и дизайни.
Добавяне на бутон за динамично разгъване и свиване
Добавянето на бутон за разгъване/свиване прави картите по-реалистични и интерактивни. С този шаблон разширявате съдържанието, като щракнете върху Разширяване бутон, след което текстът се променя на Свиване. Така че текстът на бутона превключва между „Разгъване“ и „Свиване“, докато щракнете върху него. Освен това останалата част от съдържанието се показва и скрива във всяко съответно състояние.
Вече сте дефинирали вход елемент във вашия HTML. Този елемент ще ви служи като бутон. За да стилизирате този вход в бутон, включете следния CSS във вашия лист със стилове:
.expand-btn {
външен вид: нито един;
граница: 1pxтвърдочерен;
подплата: .5em;
граница-радиус: .25em;
курсор: показалец;
margin-top: 1рем;
}Когато задържите курсора на мишката върху бутона, искате да промените цвета на фона:
.expand-btn:задръжте {
Цвят на фона: #ccc;
}Сега CSS за превключване на текста при проверка на входа:
.expand-btn::преди {
съдържание: "Разширяване"
}
.expand-btn:проверено::преди {
съдържание: "Свиване"
}
Сега, когато щракнете върху бутона/въвеждане, текстът тръгва от Разширяване да се Свиване. Но самото съдържание все още няма да се разширява. За да го направите, когато щракнете върху бутона, добавете следния CSS:
.cuttoff-текст:има(+.expand-btn:проверено) {
височина: Автоматичен;
}Този пример използва has() CSS селектор за насочване към елемента. С този код вие казвате, че ако изрязаната текстова област има отметнат бутон за разширяване, височината на картата трябва да бъде Автоматичен (което го разширява).
Ето резултата:
Други CSS съвети и трикове, които да научите
Тази статия демонстрира два различни метода за ограничаване на броя на редовете в кутия с помощта на CSS. Дори добавихме бутон за разширяване/свиване на съдържанието, без да пишем нито един ред JavaScript.
Но има много други съвети и трикове в CSS. Тези съвети ви предлагат креативен начин да постигнете желаните от вас оформления, без да влошавате производителността, четливостта или достъпността.