Kropki CSS, jeśli nie pasują. Przycinanie tekstu jedno- lub wieloliniowego do wysokości poprzez dodanie wielokropka

W niektórych przypadkach zawartość bloku pojawia się poza granicami elementu, nakładając się na niego. Aby kontrolować zachowanie elementów na poziomie bloku, użyj właściwości overflow, która określa, w jaki sposób powinna być wyświetlana treść wykraczająca poza blok.

Korzystając z właściwości klip, możesz przyciąć element do określonych wymiarów.

1. Właściwość przepełnienia

Zawartość elementów blokowych może przepełnić blok, gdy blok ma wyraźną wysokość i/lub szerokość. Bez określenia wysokości blok rozciągnie się, aby pomieścić zawartość, chyba że blok zostanie ustawiony w pozycji: bezwzględna; lub pozycja: stała; . Tekst może przekraczać blok wysokością, obrazy - wysokością i szerokością.

2. Właściwość przepełnienia-x

Właściwość określa, w jaki sposób prawa krawędź zawartości wewnątrz bloku zostanie obcięta w przypadku przepełnienia.

Składnia:

Div ( przepełnienie-x: ukryte; )

3. Właściwość przepełnienia

Właściwość określa, w jaki sposób dolna krawędź zawartości wewnątrz bloku zostanie przycięta w przypadku przepełnienia.

Składnia:

Div (przepełnienie-y: ukryte; )

4. Właściwość klipu

Właściwość określa, jaka część elementu będzie widoczna. Część elementu, która pozostaje widoczna po przycięciu, nazywa się obszarem przycinania. Przycinanie jest stosowane do elementu, który jest początkowo w pełni widoczny. Właściwość dotyczy elementów, których właściwość position jest ustawiona na wartość bezwzględną lub stałą.

Wewnątrz bloku o stałej wysokości i szerokości należy wyświetlić tekst o dowolnej długości. W takim przypadku, jeśli tekst nie mieści się całkowicie, należy wyświetlić fragment tekstu całkowicie mieszczący się w danym bloku, po czym ustawia się wielokropek.

To zadanie jest dość powszechne, ale jednocześnie nie jest tak trywialne, jak się wydaje.

Opcja dla tekstu jednowierszowego w CSS

W takim przypadku możesz użyć właściwości text-overflow: ellipsis. W takim przypadku kontener musi posiadać właściwość przelewowy równy ukryty Lub klips

Blok (szerokość: 250 pikseli; biała spacja: nowrap; przepełnienie: ukryte; przepełnienie tekstu: wielokropek;)

Opcja tekstu wielowierszowego w CSS

Pierwszym sposobem przycięcia tekstu wielowierszowego jest użycie Właściwości CSS zastosuj pseudoelementy :zanim I :Po. Zacznijmy od znaczników HTML

A teraz same właściwości

Box (przepełnienie: ukryte; wysokość: 200px; szerokość: 300px; wysokość linii: 25px;) .box:before (treść: ""; pływak: lewy; szerokość: 5px; wysokość: 200px;) .box > *:first -child ( float : prawy ; szerokość : 100% ; margines-lewy : -5px ; ) .box :after ( treść : "\02026" ; rozmiar-pudełka: pole-zawartości; float: prawy; pozycja: względna; góra: -25px ; szerokość : 3em ; dopełnienie po prawej stronie : 5px ; rozmiar tła : 100% 100% ; (255, 255, 255, 0), biały 50%, biały);

Innym sposobem jest użycie właściwości szerokości kolumny, za pomocą której ustalamy szerokość kolumny dla tekstu wielowierszowego. Jednak przy stosowaniu tej metody nie będzie możliwe ustawienie wielokropka na końcu. HTML:

Blok ( przepełnienie : ukryty ; wysokość : 200px ; szerokość : 300px ; ) .block__inner ( -webkit-column-width : 150px ; -moz-column-width : 150px ; szerokość kolumny : 150px ; wysokość : 100% ; )

Istnieje trzeci sposób rozwiązywania tekstu wielowierszowego za pomocą CSS dla przeglądarek Pakiet internetowy. Będziemy w nim musieli użyć kilku konkretnych właściwości z przedrostkiem -webkit. Najważniejszym z nich jest -webkit-line-clamp, który pozwala określić liczbę linii wysyłanych w bloku. Rozwiązanie jest piękne, ale dość ograniczone ze względu na pracę w ograniczonej grupie przeglądarek

Blok (przepełnienie: ukryte; przepełnienie tekstu: wielokropek; wyświetlacz: -webkit-box ; -webkit-line-clamp: 2; -webkit-box-orient: pionowy; )

Opcja tekstu wielowierszowego w JavaScript

Tutaj zastosowano dodatkowy niewidoczny blok, w którym początkowo umieszczany jest nasz tekst, po czym jest on usuwany po znaku, aż wysokość tego bloku będzie mniejsza lub równa wysokości żądany blok. Na koniec tekst zostaje przeniesiony do oryginalnego bloku.

var blok = dokument. querySelector(.block"), tekst = blok. insideHTML, klon = dokument. utwórzElement("div");

klon styl. pozycja = "absolutna" ;

(funkcja ($ ) ( var truncate = funkcja (el ) ( var tekst = el . tekst (), wysokość = el . wysokość (), clone = el . clone (); clone . css (( pozycja: „absolutna” , widoczność: „ukryty”, wysokość: „auto” )); (klon. tekst (tekst. substring (0, l) + „…”); el. tekst (klon. usuń ()); (zwróć to. każdy (funkcja () ( obcięcie ( $ ( to )); ));

Problem

Cięcie na skróty to nie tylko kwestia szybki sposób osiągnąć cel, ale także popularną opcją stylizacji zarówno w projektowaniu do druku, jak i projektowaniu stron internetowych. Najczęściej polega to na przycięciu jednego lub kilku narożników pojemnika pod kątem 45°. W ostatnio, ze względu na fakt, że skeuomorfizm zaczął tracić grunt pod płaską konstrukcję, efekt ten jest szczególnie popularny. Kiedy narożniki są ścięte tylko z jednej strony i każdy narożnik zajmuje 50% wysokości elementu, powstaje kształt w kształcie strzałki, który często wykorzystywany jest także przy projektowaniu przycisków i elementów nawigacji nawigacyjnej.

Jednak CSS wciąż nie ma wystarczającej liczby narzędzi, aby uzyskać taki efekt za pomocą prostych, prostych, jednowierszowych. Z tego powodu wielu programistów ma tendencję do używania obrazy tła: Zakryj wycięte rogi trójkątami (na jednokolorowym tle) lub utwórz całe tło, korzystając z jednego lub większej liczby obrazów, w których rogi są już wycięte. Oczywiście takie metody są całkowicie nieelastyczne, trudne w utrzymaniu i zwiększają opóźnienia ze względu na dodatkowe żądania HTTP i ogólny rozmiar plików witryny.

Przykład strony internetowej, gdzie ścięty róg (lewy dolny róg półprzezroczystego pola Znajdź i zarezerwuj) idealnie wpasowuje się w projekt

Rozwiązanie

Jeden możliwe rozwiązanie zaoferuj nam potężne gradienty CSS. Powiedzmy, że chcemy tylko jeden ścięty róg, powiedzmy prawy dolny róg. Sztuka polega na tym, aby wykorzystać zdolność gradientów do przyjęcia kierunku kąta (na przykład 45 stopni) i położenia granic przejścia kolorów w wartościach bezwzględnych, które nie zmieniają się wraz ze wzrostem gabarytów elementu, do którego tło należy do zmiany. Z powyższego wynika, że ​​wystarczy nam jeden gradient liniowy.

Dodamy przezroczystą granicę przyciemnienia, aby utworzyć ścięty róg, oraz kolejną granicę przyciemnienia w tym samym miejscu, ale w kolorze pasującym do tła. Kod CSS będzie wyglądał następująco (dla rogu 15 pikseli):

tło: #58a;
tło: gradient liniowy (-45 stopni, przezroczysty 15 pikseli, #58a 0);

Proste, prawda? Wynik możesz zobaczyć na rysunku.

Technicznie rzecz biorąc, nie potrzebujemy nawet pierwszego ogłoszenia. Dodaliśmy to tylko jako obejście: jeśli gradienty CSS nie są obsługiwane, druga deklaracja zostanie zignorowana, więc otrzymamy przynajmniej tło w jednolitym kolorze. Załóżmy teraz, że potrzebujemy dwóch ściętych rogów, powiedzmy obu dolnych rogów. Nie można tego zrobić za pomocą tylko jednego gradientu, więc będziemy potrzebować dwóch. Twoja pierwsza myśl może wyglądać mniej więcej tak:

tło: #58a;
tło: gradient liniowy (-45 stopni, przezroczysty 15 pikseli, #58a 0), gradient liniowy (45 stopni, przezroczysty 15 pikseli, #655 0);

Jednak to nie działa. Domyślnie oba gradienty zajmują całą powierzchnię elementu, więc wzajemnie się zasłaniają. Musimy je zmniejszyć, ograniczając każdy z nich do połowy elementu za pomocą rozmiaru tła:
tło: #58a;

rozmiar tła: 50% 100%;

Wynik możesz zobaczyć na rysunku.

Mimo że zastosowaliśmy rozmiar tła, gradienty nadal nakładają się na siebie. Powodem jest to, że zapomnieliśmy wyłączyć powtarzanie tła, więc każde z teł jest powtarzane dwukrotnie. W rezultacie jedno z tła nadal przysłania drugie, ale tym razem poprzez powtórzenie. Nowa wersja kod wygląda następująco:
tło: #58a;
tło: gradient liniowy (-45 stopni, przezroczysty 15 pikseli, #58a 0) po prawej stronie, gradient liniowy (45 stopni, przezroczysty 15 pikseli, #655 0) po lewej;
rozmiar tła: 50% 100%;

Efekt możecie zobaczyć na zdjęciu i mieć pewność, że w końcu jest! - działa! Prawdopodobnie już zgadłeś, jak zastosować ten efekt do wszystkich czterech rogów. Będziesz potrzebować czterech gradientów i kodu podobnego do poniższego:

tło: #58a;
tło: gradient liniowy (135 stopni, przezroczysty 15 pikseli, #58a 0) u góry po lewej stronie,

gradient liniowy (-135 stopni, przezroczysty 15 pikseli, #655 0) w prawym górnym rogu,

gradient liniowy (-45 stopni, przezroczysty 15 pikseli, #58a 0) w prawym dolnym rogu,

gradient liniowy (45 stopni, przezroczysty 15 pikseli, #655 0) u dołu po lewej;
rozmiar tła: 50% 50%;
powtarzanie w tle: brak powtórzeń;

RADA
Użyliśmy różnych kolorów (#58a i #655), aby ułatwić debugowanie. W praktyce oba gradienty będą tego samego koloru.
Problem z poprzednim kodem polega jednak na tym, że jest trudny w utrzymaniu. Wymaga pięciu edycji, aby zmienić kolor tła i czterech, aby zmienić wartość kąta. Mieszanka utworzona przy użyciu preprocesora może zmniejszyć liczbę powtórzeń. Tak wyglądałby ten kod w SCSS:
SCSS
@mixin skośne-rogi($bg,
$tl:0, $tr:$tl, $br:$tl, $bl:$tr) (
tło: $bg;
tło:
gradient liniowy (135 stopni, przezroczysty $tl, $bg 0)
lewy górny róg,
gradient liniowy (225 stopni, przezroczysty $tr, $bg 0)
prawy górny róg,
gradient liniowy (-45 stopni, przezroczysty $br, $bg 0)
prawy dolny róg,
gradient liniowy (45 stopni, przezroczysty $bl, $bg 0)
lewy dolny róg;
rozmiar tła: 50% 50%;
powtarzanie w tle: brak powtórzeń;
}

Można go następnie wywołać w razie potrzeby, jak pokazano poniżej, z 2-5 argumentami:
SCSS
@włącz skośne rogi (#58a, 15px, 5px);
W tym przykładzie otrzymamy element, który ma lewy górny i prawy dolny róg przycięty o 15 pikseli, a prawy górny i lewy dolny róg przycięty o 5 pikseli, podobnie jak działa promień obramowania, gdy określimy mniej niż cztery wartości. Jest to możliwe, ponieważ zadbaliśmy również o domyślne wartości argumentów w naszym miksie SCSS - i tak, te domyślne wartości mogą odnosić się również do innych argumentów.
WYPRÓBUJ SAM!
http://play.csssecrets.io/bevel-corners-gradients

Zakrzywione, ścięte rogi

Doskonały przykład wykorzystania zakrzywionych, ściętych narożników na stronie internetowej. http://g2geogeske.com projektant uczynił je centralnym elementem projektu: są obecne w nawigacji, treści, a nawet stopce.
Odmiana metody z gradientami umożliwia tworzenie zakrzywionych, ściętych narożników — efekt ten wielu nazywa „promieniem wewnętrznej krawędzi”, ponieważ wygląda jak odwrócona wersja zaokrąglonych narożników. Jedyną różnicą jest zastosowanie gradientów promieniowych zamiast liniowych:
tło: #58a;
tło: gradient radialny (okrąg w lewym górnym rogu, przezroczyste 15px, #58a 0) w lewym górnym rogu,

radial-gradient (okrąg w prawym górnym rogu, przezroczyste 15 pikseli, #58a 0) w prawym górnym rogu,

gradient-radialny (okrąg w prawym dolnym rogu, przezroczysty 15px, #58a 0) w prawym dolnym rogu,

radial-gradient (okrąg w lewym dolnym rogu, przezroczyste 15 pikseli, #58a 0) w lewym dolnym rogu;
rozmiar tła: 50% 50%;
powtarzanie w tle: brak powtórzeń;

Podobnie jak w poprzedniej technice, wielkość kąta można kontrolować poprzez położenie granic przejścia kolorów, a miksowanie może sprawić, że ten kod będzie bardziej odpowiedni do dalszej konserwacji.

WYPRÓBUJ SAM!
http://play.csssecrets.io/scoop-corners

Rozwiązanie z ciągiem SVG i obrazem obramowania

Chociaż rozwiązanie oparte na gradientach działa, ma kilka wad:
Kod jest bardzo długi i pełen powtórzeń. W najczęstszym przypadku, gdy musimy obciąć wszystkie cztery rogi o tę samą wielkość, zmiana tej wielkości wiąże się z czterema zmianami w kodzie.

Podobnie zmiana koloru tła również wymaga czterech edycji, a jeśli wziąć pod uwagę rozwiązanie awaryjne, to wszystkich pięciu; Animowanie zmian wielkości ściętego narożnika jest niezwykle trudne, a w niektórych przeglądarkach zupełnie niemożliwe. Na szczęście w zależności od pożądanego rezultatu możemy zastosować jeszcze kilka metod. Jednym z nich jest zjednoczenie obraz-graniczny z ciągiem kodu SVG, w którym generowane są narożniki.

Wiedząc jak to działa obraz-graniczny(jeśli chcesz odświeżyć sobie tę wiedzę w pamięci, znajdziesz podpowiedź), czy wyobrażasz sobie już, jak powinna wyglądać ta wymagana? SVG-kod?

Ponieważ wymiary ogólne nie są dla nas ważne (obrazek obramowania zajmie się skalowaniem, a obrazy SVG są idealnie skalowane niezależnie od rozmiaru - bądź błogosławiony grafika wektorowa!), wszystkie rozmiary można zrównać do jednego, aby operować wygodniejszymi i krótszymi wartościami. Wartość ściętego narożnika będzie równa jeden, a proste boki również będą równe jeden. Wynik (powiększony dla łatwiejszego przeglądania). Wymagany do tego kod pokazano poniżej:
obramowanie: 15px pełne przezroczyste;


szerokość=”3″ wysokość=”3″ wypełnienie=”%2358a”>\
\
’);

Należy pamiętać, że wielkość kroku krojenia wynosi 1. Nie oznacza to 1 piksela; rzeczywisty rozmiar jest określony przez układ współrzędnych pliku SVG (dlatego nie mamy jednostek). Gdybyśmy użyli wartości procentowych, musielibyśmy przybliżyć 1/3 obrazu wartością ułamkową, np. 33,34%. Odwoływanie się do wartości przybliżonych jest zawsze ryzykowne, ponieważ różne przeglądarki Wartości mogą być zaokrąglane z różnym stopniem dokładności. Trzymając się jednostek zmiany w układzie współrzędnych pliku SVG, oszczędzamy sobie bólu głowy związanego z całym tym zaokrąglaniem.

Jak widać, ścięte rogi są obecne, ale nie ma tła. Istnieją dwa sposoby rozwiązania tego problemu: albo zdefiniuj tło, albo dodaj słowo kluczowe fill do deklaracji obrazu obramowania, tak aby środkowy element plasterka nie został odrzucony. W naszym przykładzie wolelibyśmy zdefiniować osobne tło, ponieważ ta definicja będzie również służyć jako obejście dla przeglądarek, które nie obsługują tego rozwiązania.

Dodatkowo prawdopodobnie zauważyłeś, że ścięte rogi są teraz mniejsze niż w poprzedniej technice, co może być mylące. Ustawiamy szerokość ramki na 15px! Powodem jest to, że w rozwiązaniu gradientowym te 15 pikseli zostało zmierzonych wzdłuż linii gradientu, która jest prostopadła do kierunku gradientu. Jednak szerokość ramy nie jest mierzona po przekątnej, ale w poziomie/pionie.

Czy czujesz, dokąd z tym zmierzam? Tak, tak, znowu wszechobecne twierdzenie Pitagorasa, z którego aktywnie korzystaliśmy. Schemat na rysunku powinien rozjaśnić sprawę.

Krótko mówiąc, aby osiągnąć ten sam efekt wizualny, potrzebujemy szerokości obramowania 2 razy większej niż szerokość zastosowana w metodzie gradientowej. W w tym przypadku będzie to piksel, który najrozsądniej będzie przybliżać się do 20px, chyba że staniemy przed zadaniem zbliżenia rozmiaru przekątnej jak najbardziej do cenionych 15px:

border-image: 1 url(‘data:image/svg+xml,\

szerokość=”3″ wysokość=”3″ wypełnienie=”%2358a”>\

0,2″/>\
’);
tło: #58a;
Jak jednak widać, wynik nie jest taki, jakiego się spodziewaliśmy.

Gdzie się podziały nasze pieczołowicie przycięte rogi? Nie bój się, młody Padawanie, narożniki są jeszcze na swoim miejscu. Natychmiast zrozumiesz, co się stało, jeśli ustawisz inny kolor tła, na przykład #655.
Jak pokazuje poniższy obrazek, powodem zniknięcia naszych rogów jest tło: tło, które zdefiniowaliśmy powyżej, po prostu je zasłania. Aby wyeliminować tę niedogodność, wystarczy użyć klipu tła, który zapobiegnie wsuwaniu się tła pod obszar ramki:
obramowanie: 20px pełne przezroczyste;
border-image: 1 url(‘data:image/svg+xml,\

szerokość=”3″ wysokość=”3″ wypełnienie=”%2358a”>\

0,2″/>\
’);
tło: #58a;

Teraz problem został rozwiązany i nasze pole wygląda dokładnie tak samo jak wcześniej. Dodatkowo, tym razem możemy łatwo zmienić rozmiar narożników za pomocą jednej edycji: po prostu dostosuj szerokość ramki. Możemy nawet animować ten efekt, ponieważ szerokość obramowania obsługuje animację!

Zmiana tła wymaga teraz dwóch edycji zamiast pięciu. Dodatkowo, ponieważ nasze tło nie zależy od efektu zastosowanego w rogach, możemy nadać mu gradient lub dowolny inny wzór, pod warunkiem, że kolor na krawędziach nadal będzie #58a .

Na przykład używamy gradientu promieniowego od hsla(0,0%,100%,.2) do przezroczystego. Pozostał tylko jeden mały problem do rozwiązania. Jeśli obraz obramowania nie jest obsługiwany, rozwiązanie awaryjne nie będzie ograniczone do braku ściętych narożników. Ponieważ tło zostanie przycięte, pomiędzy krawędzią pola a jego zawartością będzie mniej miejsca. Aby to naprawić, musimy zdefiniować ten sam kolor ramki, którego używamy jako tła:
obramowanie: 20 pikseli ciągłych #58a;
border-image: 1 url(‘data:image/svg+xml,\

szerokość=”3″ wysokość=”3″ wypełnienie=”%2358a”>\
\
’);
tło: #58a;
klip w tle: pole wyściółki;

W przeglądarkach, gdzie nasza definicja obraz-graniczny jest obsługiwany, ten kolor zostanie zignorowany, ale jeśli obraz obramowania nie powiedzie się, dodatkowy kolor obramowania zapewni bardziej eleganckie rozwiązanie zastępcze. Jego jedyną wadą jest to, że zwiększa liczbę edycji wymaganych do zmiany koloru tła do trzech.
WYPRÓBUJ SAM!
http://play.csssecrets.io/bevel-corners

Rozwiązanie ścieżki przycinającej

Chociaż rozwiązanie w postaci obrazu granicznego jest bardzo kompaktowe i dobrze przestrzega zasad DRY, nakłada pewne ograniczenia. Na przykład nasze tło powinno być nadal w całości lub przynajmniej na krawędziach wypełnione jednolitym kolorem.

A co jeśli chcemy zastosować inny typ tła, np. teksturę, wzór czy gradient liniowy? Istnieje inna metoda, która nie ma takich ograniczeń, chociaż oczywiście istnieją pewne ograniczenia w jej stosowaniu.

Pamiętaj o majątku ścieżka klipu z sekretu „Jak zrobić romb”? Ścieżki przycinające CSS mają niesamowitą właściwość: pozwalają mieszać wartości procentowe (sposób, w jaki określamy ogólne wymiary elementu) z wartościami bezwzględnymi, zapewniając niesamowitą elastyczność. Na przykład kod ścieżki przycinającej, która przycina element do prostokąta o wielkości 20 pikseli ze ściętymi narożnikami (mierzonymi w poziomie) wygląda następująco:
tło: #58a;
ścieżka-przycinania: wielokąt (
20px 0, oblicz(100% - 20px) 0, 100% 20px,
100% oblicz (100% - 20px), oblicz (100% - 20px) 100%,
20px 100%, 0 calc(100% - 20px), 0 20px);
Chociaż ten fragment kodu jest krótki, nie jest zgodny z zasadami DRY i staje się to jednym z największych problemów, jeśli nie używasz preprocesora. Tak naprawdę ten kod jest najlepszą ilustracją zasady WET ze wszystkich czystych rozwiązań CSS przedstawionych w tej książce, ponieważ wymaga aż ośmiu (!) edycji, aby zmienić rozmiar narożnika.

Z drugiej strony tło można zmienić za pomocą jednej edycji, więc przynajmniej to mamy. Jedna z zalet to podejście- fakt, że możemy zastosować absolutnie dowolne tło, a nawet elementy zastępujące kadr, takie jak obrazy. Ilustracja przedstawia obraz stylizowany za pomocą ściętych narożników. Żadna z poprzednich metod nie może osiągnąć takiego efektu. Ponadto właściwość clip-path obsługuje animację, dzięki czemu możemy animować nie tylko zmianę wielkości narożnika, ale także przejścia pomiędzy różnymi kształtami.

Wszystko, co musisz zrobić, to użyć innej ścieżki przycinającej. Oprócz tego, że jest gadatliwy i ma ograniczoną obsługę przeglądarek, wadą tego rozwiązania jest to, że jeśli nie upewnimy się, że dopełnienie jest wystarczająco szerokie, tekst również zostanie obcięty, ponieważ przycięcie elementu nie powoduje pobrania żadnego z jego komponentów pod uwagę. Natomiast metoda gradientowa pozwala, aby tekst po prostu wysunął się poza obcięte rogi (w końcu stanowią one tylko część tła), a metoda border-image działa tak samo, jak zwykłe obramowania - zawija tekst na nową linia.

WYPRÓBUJ SAM!
http://play.csssecrets.io/bevel-corners-clipped

PRZYSZŁE CIĘCIE NAROŻNIKÓW
W przyszłości nie będziemy musieli uciekać się do gradientów CSS, przycinania czy SVG, aby uzyskać efekt ściętych rogów. Nowa nieruchomość kształt narożnika, zawarte w Tła i obramowania CSS, poziom 4 , uratuje nas od tego bólu głowy, posłuży do stworzenia efektu narożników pociętych na różne kształty w połączeniu z właściwością border-promień, która jest niezbędna do określenia wielkości przycięcia. Na przykład, aby opisać ścięte rogi o rozmiarze 15 pikseli ze wszystkich stron obrazu, wystarczy następujący prosty kod:

promień obramowania: 15px;
kształt narożnika: skos;

Przeczytaj także

Wład Merzewicz

Pomimo tego, że monitory o dużych przekątnych stają się coraz bardziej dostępne cenowo, a ich rozdzielczość stale rośnie, czasami pojawia się zadanie zmieszczenia dużej ilości tekstu na ograniczonej przestrzeni. Na przykład może to być potrzebne wersja mobilna witryny lub dla interfejsu, w którym ważna jest liczba linii. W takich przypadkach sensowne jest przycięcie długich linii tekstu, pozostawiając jedynie początek zdania. W ten sposób doprowadzimy interfejs do zwartej formy i zmniejszymy ilość wyświetlanych informacji. Samo przycięcie linii można wykonać po stronie serwera przy użyciu tego samego PHP, ale jest to łatwiejsze dzięki CSS i zawsze możesz wyświetlić cały tekst, na przykład po najechaniu na niego kursorem myszy. Następnie przyjrzymy się metodom wycinania tekstu wyimaginowanymi nożyczkami.

W rzeczywistości wszystko sprowadza się do użycia właściwości overflow z wartością ukrytą. Różnice polegają jedynie na innym sposobie wyświetlania naszego tekstu.

Korzystanie z przepełnienia

Aby właściwość overflow pokazała się z tekstem w całej okazałości, musisz rozpakować tekst za pomocą białych znaków z wartością nowrap . Jeśli tego nie zrobisz, potrzebny efekt nie wystąpi; do tekstu zostaną dodane łączniki i wyświetlony zostanie cały tekst. Przykład 1 pokazuje, jak przyciąć długi tekst za pomocą określonego zestawu właściwości stylu.

Przykład 1. przepełnienie tekstu

HTML5 CSS3 IE Cr Op Fx

Wynik tego przykładu pokazano na ryc. 1.

Ryż. 1. Wygląd tekstu po zastosowaniu właściwości przepełnienia

Jak widać na rysunku, ogólnie rzecz biorąc, istnieje jedna wada - nie jest oczywiste, czy tekst ma kontynuację, dlatego należy o tym poinformować użytkownika. Zwykle odbywa się to za pomocą gradientu lub elipsy.

Dodawanie gradientu do tekstu

Aby było wyraźniejsze, że tekst po prawej stronie się nie kończy, możesz nałożyć na niego gradient z przezroczystego koloru na kolor tła (ryc. 2). Stworzy to efekt stopniowego rozpuszczenia tekstu.

Ryż. 2. Tekst gradientowy

Przykład 2 pokazuje, jak stworzyć ten efekt. Styl samego elementu pozostanie praktycznie taki sam, ale sam gradient dodamy za pomocą pseudoelementu ::after i CSS3. Aby to zrobić, wstawiamy pusty pseudoelement poprzez właściwość content i stosujemy do niego gradient z różnymi przedrostkami dla głównych przeglądarek (przykład 2). Szerokość gradientu można łatwo zmienić za pomocą opcji szerokość , możesz także dostosować stopień przezroczystości, zastępując wartość 0,2 własną.

Przykład 2: Gradient nad tekstem

HTML5 CSS3 IE 8 IE 9+ Cr Op Sa Fx

Wewnątrzdyskretne arpeggio przekształca poliserię; jest to jednorazowy pion w super polifonicznej tkaninie.

Ta metoda nie działa w Przeglądarka internetowa Explorer do wersji 8.0 włącznie, ponieważ nie obsługuje gradientów. Możesz jednak porzucić CSS3 i stworzyć gradient w staromodny sposób, poprzez obraz w formacie PNG-24.

Tę metodę można połączyć tylko z gładkim tłem, a w przypadku obrazu tła zauważalny będzie gradient nad tekstem.

Wielokropek na końcu tekstu

Zamiast gradientu możesz także użyć wielokropka na końcu przyciętego tekstu. Co więcej, zostanie on dodany automatycznie przy użyciu właściwości przepełnienia tekstu. Rozumieją ją wszystkie przeglądarki, łącznie ze starszymi wersjami IE, a jedyną wadą tej właściwości jest to, że jej status jest obecnie niejasny. Wydaje się, że CSS3 zawiera tę właściwość, ale kod z nią nie przechodzi weryfikacji.

Przykład 3 pokazuje użycie właściwości przepełnienia tekstu z wartością wielokropka, która dodaje wielokropek. Po najechaniu myszką na tekst zostanie on wyświetlony w całości i podświetlony kolorem tła.

Przykład 3: Korzystanie z przepełnienia tekstu

HTML5 CSS3 IE Cr Op Fx

Nieświadomość powoduje kontrast, Lee Ross określił to mianem podstawowego błędu atrybucji, co można zaobserwować w wielu eksperymentach.

Wynik tego przykładu pokazano na ryc. 3.

Ryż. 3. Tekst z elipsami

Dużą zaletą tych metod jest to, że gradient i elipsy nie są wyświetlane, jeśli tekst jest krótki i mieści się w całości na zadanym obszarze. Zatem tekst będzie wyświetlany normalnie, gdy będzie w całości widoczny na ekranie i zostanie obcięty w przypadku zmniejszenia szerokości elementu.