Zapoznaj się z poręczną techniką CSS, której możesz użyć do ukrywania treści i ujawniania jej na żądanie.
Ograniczenie ilości tekstu w elemencie to powszechny wymóg projektowania stron internetowych. Często zobaczysz artykuł z trzy- lub czterowierszowym fragmentem z przyciskiem, który pozwala rozwinąć cały tekst.
Możesz stworzyć ten projekt za pomocą kombinacji CSS i JavaScript. Ale możesz to również zrobić za pomocą samego CSS. Odkryj dwa sposoby ograniczania tekstu w ramce i jak stworzyć dynamiczny przycisk rozwijania za pomocą samego CSS.
Technika Webkita
Utwórz pusty folder i edytuj w nim dwa pliki: indeks.html I styl.css. W środku indeks.html plik, utwórz szkielet HTML:
HTML>
<HTMLlang="pl"><głowa>
<tytuł>Dokumenttytuł>
<połączyćrel=„arkusz stylów”href="styl.css">
głowa><ciało>
ciało>
HTML>
Link w sekcja, do styl.css plik, zapewnia, że każdy kod CSS dodany do tego pliku będzie miał zastosowanie do tej strony. Następnie wklej następujące znaczniki HTML w pliku tagi w indeks.html:
<Sekcjaklasa=„grupa kart”>
<artykułklasa="karta">
<h2>artykuł 1h2><Pklasa=„tekst odcięty”>
Tekst na 300 słów idzie tutaj
P><wejścietyp=„pole wyboru”klasa="rozwiń-btn">
artykuł><artykułklasa="karta">
<h2>Artykuł 2h2><Pklasa=„tekst odcięty”>
Tekst na 200 słów idzie tutaj
P><wejścietyp=„pole wyboru”klasa="rozwiń-btn">
artykuł><artykułklasa="karta">
<h2>artykuł 1h2><Pklasa=„tekst odcięty”>
Tekst na 100 słów idzie tutaj
P>
<wejścietyp=„pole wyboru”klasa="rozwiń-btn">
artykuł>
Sekcja>
Struktura tego kodu HTML jest prosta, ale nadal jest używana semantyczne znaczniki dostępności. Element sekcji zawiera trzy elementy artykułu. Każdy artykuł składa się z nagłówka, akapitu i elementu wejściowego. Użyjesz CSS, aby stylizować każdą sekcję artykułu na karcie.
W międzyczasie Twoja strona będzie wyglądać tak:
Na powyższym obrazku widać różne długości tekstu w każdym akapicie. 300 słów w pierwszym, 200 słów w drugim i 100 w trzecim.
Następnym krokiem jest rozpoczęcie stylizacji strony poprzez dodanie CSS do pliku styl.css plik. Zacznij od zresetowania obramowania dokumentu i nadania ciału białego koloru tła:
*, *::zanim, *::Po {
rozmiar pudełka: ramka;
}
ciało {
tło: #f3f3f3;
przelewowy: ukryty;
}
Następnie przekształć element z klasą card-group w kontener siatki z trzema kolumnami. Każda sekcja artykułu zajmuje kolumnę:
.grupa kart {
wyświetlacz: siatka;
kolumny szablonu siatki: powtarzać(3, 1fr);
luka: .5 rem;
wyrównaj elementy: elastyczny start;
}Stylizuj każdą sekcję artykułu jako kartę z białym tłem i czarną, lekko zaokrągloną ramką:
.karta {
tło: biały;
wyściółka: 1Rem;
granica: 1pikssolidnyczarny;
promień granicy: 0,25 em;
}Na koniec dodaj marginesy:
h2, P {
margines: 0;
}
h2 {
margines-dolny: 1Rem;
}
Zapisz plik i sprawdź swoją przeglądarkę. Strona powinna wyglądać tak, jak pokazano na poniższym obrazku:
Następnym krokiem jest zmniejszenie liczby linii dla każdego tekstu do 3. Oto CSS do tego:
.odcięty tekst {
--max-linie: 3;
przelewowy: ukryty;
wyświetlacz: -webkit-pudełko;
-webkit-box-orient: pionowy;
-webkit-line-clamp: rozm(--max-linie);
}
Zacznij od ustawienia zmienną CSS, max-lines, do 3 i ukrywanie przepełnionej zawartości. Następnie ustaw wyświetlacz na -webkit-pudełko i zamocuj linię do 3.
Poniższy obraz przedstawia wynik. Każda karta wyświetla elipsę w trzecim wierszu tekstu:
Ta technika może być dość trudna do wykonania. Jeśli pominiesz jakąkolwiek właściwość, wszystko się zepsuje. Inną wadą jest to, że nie można użyć właściwości wyświetlania innej niż --webkit-pudełko. Na przykład możesz chcieć użyj Grida lub Flexboksa. Z tych powodów następująca technika jest lepsza.
Bardziej elastyczne podejście do ograniczania liczby wierszy w tekście
Ta technika pozwala zrobić to samo, co podejście webkit, z tymi samymi wynikami. Ale duża różnica polega na tym, że masz mnóstwo elastyczności, ponieważ sam ustalasz wysokość. Ponadto możesz użyć dowolnej właściwości wyświetlania lub dowolnej preferowanej opcji stylizacji.
Aby rozpocząć, zastąp blok CSS dla .odcięty tekst z tym:
.odcięty tekst {
--max-linie: 5;
--Wysokość linii: 1.4;
wysokość: oblicz(rozm(--max-linie) * 1oni * rozm(--Wysokość linii));
Wysokość linii: rozm(--Wysokość linii);
pozycja: względny;
}Ustawienie wysokości linii jest ważne, ponieważ musisz wziąć to pod uwagę przy określaniu swojego wzrostu. Aby uzyskać wysokość, mnożysz wysokość linii przez rozmiar czcionki i liczbę linii.
Dodajemy pozycja: względna właściwość, ponieważ potrzebujemy jej, aby dodać efekt zanikania. Dodaj następujący CSS, aby zakończyć efekt:
.odcięty tekst::zanim {
treść: "";
pozycja: absolutny;
wysokość: oblicz(2oni * rozm(--Wysokość linii));
szerokość: 100%;
spód: 0;
zdarzenia wskazujące: nic;
tło: gradient liniowy(Dospód, przezroczysty, biały);
}Powyższy CSS rozmywa ostatni wiersz tekstu na każdej karcie. Możesz uzyskać efekt blaknięcia za pomocą tło właściwość i gradient. Musisz ustawić zdarzenia wskazujące Do nic aby upewnić się, że elementu nie można wybrać.
Oto wynik:
Ta technika dała taki sam rezultat jak poprzednia (plus rozmycie na końcu). Ale zyskujesz większą elastyczność w korzystaniu z innych rodzajów układów i projektów.
Dodanie dynamicznego przycisku rozwijania i zwijania
Dodanie przycisku rozwijania/zwijania sprawia, że karty są bardziej realistyczne i interaktywne. Za pomocą tego wzorca rozwijasz zawartość, klikając przycisk Zwiększać przycisk, po czym tekst zmieni się na Zawalić się. Tak więc tekst przycisku przełącza się między „Rozwiń” i „Zwiń” po kliknięciu. Ponadto reszta treści wyświetla się i ukrywa w każdym odpowiednim stanie.
Zdefiniowałeś już wejście element w twoim kodzie HTML. Ten element będzie służył jako przycisk. Aby stylizować te dane wejściowe na przycisk, umieść w arkuszu stylów następujący kod CSS:
.rozwiń-btn {
wygląd: nic;
granica: 1pikssolidnyczarny;
wyściółka: 0,5 em;
promień granicy: 0,25 em;
kursor: wskaźnik;
górny margines: 1Rem;
}Po najechaniu na przycisk chcesz zmienić kolor tła:
.rozwiń-btn:unosić się {
kolor tła: #ccc;
}Teraz CSS do przełączania tekstu, gdy dane wejściowe są zaznaczone:
.rozwiń-btn::zanim {
treść: "Zwiększać"
}
.rozwiń-btn:sprawdzony::zanim {
treść: "Zawalić się"
}
Teraz, gdy klikniesz przycisk/dane wejściowe, tekst przejdzie z Zwiększać Do Zawalić się. Ale sama treść jeszcze się nie rozszerzy. Aby zrobić to po kliknięciu przycisku, dodaj następujący CSS:
.odcięty tekst:ma(+.rozwiń-btn:sprawdzony) {
wysokość: automatyczny;
}W tym przykładzie użyto metody has() Selektor CSS do kierowania na element. Za pomocą tego kodu mówisz, że jeśli odcięty obszar tekstowy ma zaznaczony przycisk rozwijania, wysokość karty powinna wynosić automatyczny (co go rozszerza).
Oto wynik:
Inne porady i sztuczki CSS do nauczenia
W tym artykule pokazano dwie różne metody ograniczania liczby linii w pudełku za pomocą CSS. Dodaliśmy nawet przycisk do rozwijania/zwijania treści bez pisania ani jednej linijki JavaScript.
Ale w CSS jest mnóstwo innych wskazówek i sztuczek. Te wskazówki oferują kreatywny sposób na osiągnięcie pożądanych układów bez uszczerbku dla wydajności, czytelności lub dostępności.