Ухватите се у коштац са практичном ЦСС техником коју можете користити да сакријете садржај и откријете га на захтев.
Ограничавање количине текста у елементу је уобичајен захтев за веб дизајн. Често ћете видети чланак са изводом од три или четири реда са дугметом које вам омогућава да проширите цео текст.
Овај дизајн можете креирати користећи комбинацију ЦСС-а и ЈаваСцрипт-а. Али то такође можете учинити користећи само ЦСС. Откријте два начина да ограничите текст у оквиру и како можете да креирате дугме за динамичко проширење користећи само ЦСС.
Вебкит Тецхникуе
Направите празну фасциклу и уредите две датотеке у њој: индек.хтмл и стиле.цсс. Унутар индек.хтмл датотеку, направите ХТМЛ скелет:
хтмл>
<хтмлланг="ен"><глава>
<наслов>Документнаслов>
<линкрел="стилесхеет"хреф="стиле.цсс">
глава><тело>
тело>
хтмл>
Веза у одељак, на стиле.цсс датотеку, осигурава да ће се сваки ЦСС који додате тој датотеци применити на ову страницу. Затим налепите следећу ХТМЛ ознаку унутар ознаке у индек.хтмл:
<одељаккласа="група картица">
<чланаккласа="карта">
<х2>члан 1х2><стркласа="одсечени текст">
Текст од 300 речи иде овде
стр><улазнитип="поље за потврду"класа="екпанд-бтн">
чланак><чланаккласа="карта">
<х2>Члан 2х2><стркласа="одсечени текст">
Текст од 200 речи иде овде
стр><улазнитип="поље за потврду"класа="екпанд-бтн">
чланак><чланаккласа="карта">
<х2>члан 1х2><стркласа="одсечени текст">
Текст од 100 речи иде овде
стр>
<улазнитип="поље за потврду"класа="екпанд-бтн">
чланак>
одељак>
Структура овог ХТМЛ-а је једноставна, али се и даље користи семантичка ознака за приступачност. Елемент одељка садржи три елемента чланка. Сваки чланак садржи наслов, пасус и елемент за унос. Користићете ЦСС да стилизујете сваки одељак чланка у картицу.
У међувремену, ваша страница ће изгледати овако:
Са горње слике можете видети различите дужине текста у сваком пасусу. 300 речи у првом, 200 речи у другом и 100 речи у трећем.
Следећи корак је да почнете са стилизовањем странице додавањем ЦСС-а у стиле.цсс фајл. Почните тако што ћете ресетовати ивицу на документу и дати телу белу боју позадине:
*, *::пре него што, *::после {
бок-сизинг: гранична кутија;
}
тело {
позадини: #ф3ф3ф3;
преливати: сакривен;
}
Затим претворите елемент са класом цард-гроуп у мрежни контејнер са три колоне. Сваки одељак чланка заузима колону:
.цард-гроуп {
приказ: грид;
грид-темплате-колумнс: понављање(3, 1фр);
јаз: .5рем;
алигн-итемс: флек-старт;
}Стилизирајте сваки одељак чланка као картицу са белом бојом позадине и црном, благо заобљеном ивицом:
.картица {
позадини: бео;
паддинг: 1рем;
граница: 1пкчврстцрн;
граница-радијус: .25ем;
}На крају, додајте неке маргине:
х2, стр {
маргина: 0;
}
х2 {
маргина-дно: 1рем;
}
Сачувајте датотеку и проверите свој претраживач. Страница би требало да изгледа као страница приказана на слици испод:
Следећи корак је да смањите број редова за сваки текст на 3. Ево ЦСС-а за то:
.цуттофф-тект {
--мак-линије: 3;
преливати: сакривен;
приказ: -вебкит-бок;
-вебкит-бок-ориент: вертикала;
-вебкит-лине-цламп: вар(--мак-линије);
}
Почните са подешавањем ЦСС променљива, мак-линес, до 3 и сакривање препуног садржаја. Затим подесите екран на -вебкит-бок и затегните линију на 3.
Следећа слика приказује резултат. Свака картица приказује елипсу у трећем реду текста:
Ова техника може бити прилично тешка за извођење. Ако бисте изоставили било коју имовину, све ће се покварити. Још један недостатак је што не можете да користите својство приказа осим --вебкит-бок. На пример, можда желите користите Грид или Флекбок. Из ових разлога, следећа техника је боља.
Флексибилнији приступ ограничавању броја редова у тексту
Ова техника вам омогућава да урадите исту ствар као приступ вебкит-а, са истим резултатима. Али велика разлика је у томе што имате тону флексибилности јер сами подешавате висину. Осим тога, можете користити било које својство приказа или било коју опцију стила коју желите.
Да бисте започели, замените ЦСС блок за .цутофф-тект са овим:
.цуттофф-тект {
--мак-линије: 5;
--Висина линија: 1.4;
висина: цалц(вар(--мак-линије) * 1ем * вар(--Висина линија));
Висина линија: вар(--Висина линија);
положај: релативан;
}Подешавање висине линије је важно јер је потребно узети у обзир приликом одређивања висине. Да бисте добили висину, помножите висину реда са величином фонта и бројем редова.
Додамо положај: релативан својства јер нам је потребна да бисмо додали ефекат бледења. Додајте следећи ЦСС да бисте довршили ефекат:
.цуттофф-тект::пре него што {
садржаја: "";
положај: апсолутни;
висина: цалц(2ем * вар(--Висина линија));
ширина: 100%;
дно: 0;
показивач-догађаји: ниједан;
позадини: линеарно-градијент(додно, транспарентан, бео);
}Горњи ЦСС замагљује последњи ред текста на свакој картици. Можете постићи ефекат бледења користећи позадини својство и градијент. Морате поставити показивач-догађаји до ниједан како би се осигурало да елемент није могуће изабрати.
Ево резултата:
Ова техника је постигла исти резултат као и претходна (плус замућење на крају). Али добијате више флексибилности за коришћење других врста распореда и дизајна.
Додавање дугмета за динамичко проширење и сажимање
Додавање дугмета за проширивање/скупљање чини картице реалистичнијим и интерактивнијим. Са овим шаблоном ширите садржај кликом на Проширити дугме, након чега се текст мења у Колапс. Дакле, текст дугмета се мења између „Прошири“ и „Скупи“ док кликнете на њега. Штавише, остатак садржаја се приказује и сакрива у сваком одговарајућем стању.
Већ сте дефинисали улазни елемент у вашем ХТМЛ-у. Овај елемент ће служити као ваше дугме. Да бисте стилизовали овај унос у дугме, укључите следећи ЦСС у своју листу стилова:
.екпанд-бтн {
изглед: ниједан;
граница: 1пкчврстцрн;
паддинг: .5ем;
граница-радијус: .25ем;
курсор: показивач;
маргин-топ: 1рем;
}Када задржите показивач миша на дугмету, желите да промените боју позадине:
.екпанд-бтн:лебдети {
боја позадине: #ццц;
}Сада ЦСС за пребацивање текста када се провери унос:
.екпанд-бтн::пре него што {
садржаја: "Проширити"
}
.екпанд-бтн:цхецкед::пре него што {
садржаја: "Колапс"
}
Сада када кликнете на дугме/унос, текст иде од Проширити до Колапс. Али сам садржај се још неће ширити. Да бисте то учинили када кликнете на дугме, додајте следећи ЦСС:
.цуттофф-тект:има(+.екпанд-бтн:чекирано) {
висина: ауто;
}Овај пример користи хас() ЦСС селектор за циљање елемента. Овим кодом кажете да ако одсечена област текста има означено дугме за проширење, висина картице треба да буде ауто (што га проширује).
Ево резултата:
Остали ЦСС савети и трикови за учење
Овај чланак је демонстрирао две различите методе за ограничавање броја редова у оквиру помоћу ЦСС-а. Чак смо додали и дугме за проширење/сажимање садржаја без писања ниједног реда ЈаваСцрипт-а.
Али има тона других савета и трикова у ЦСС-у. Ови савети вам нуде креативан начин да постигнете жељени изглед без нарушавања перформанси, читљивости или приступачности.
