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.
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;)
Pierwszym sposobem przycięcia tekstu wielowierszowego jest użycie Właściwości CSS zastosuj pseudoelementy :zanim I :Po. Zacznijmy od znaczników HTML
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
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 raczej ograniczone ze względu na swoją pracę ograniczona grupa przeglądarki
Blok (przepełnienie: ukryte; przepełnienie tekstu: wielokropek; wyświetlacz: -webkit-box ; -webkit-line-clamp: 2; -webkit-box-orient: pionowy; )
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" ;
klon styl. widoczność = "ukryty" ;
klon styl. szerokość = blok. szerokość klienta + "px" ;
klon wewnętrznyHTML = tekst; dokument. ciało. appendChild(klon); var l = tekst . długość - 1; for (; l >= 0 && clone.clientHeight > block.clientHeight; --l) (clone.innerHTML = tekst.substring (0, l) + "...";) blok. insideHTML = klon . wewnętrznyHTML; To jest to samo, co wtyczka dla jQuery: przelewowy równy ukryty Lub klips .
Zawsze chcemy, żeby wszystko na stronie było schludne, ale na przykład masz bloki z tekstem, które muszą mieścić się w określonych granicach, może to być ogłoszenie artykułu lub opis produktu. W tym przypadku nasz tekst ma dowolną długość. Oczywiście możesz na bieżąco dostosowywać tekst do wielkości pola, aby nic się nie pomyliło, lub możesz sprawić, aby dodatkowy tekst został ukryty.
przepełnienie tekstu: wielokropek
tę decyzję :zanim I :Po .
Tekst ramki (przepełnienie: ukryty; wysokość: 200 pikseli; wysokość linii: 25 pikseli; ) .box-text:before ( treść: ""; float: lewy; szerokość: 5 pikseli; wysokość: 200 pikseli; ) .box-text > * :first-child ( float: prawo; szerokość: 100%; margines-lewy: -5px; ) .box-text:after ( treść: "\02026"; rozmiar pudełka: pole zawartości; float: prawo; pozycja: względny; góra: -25px; szerokość: 3em; dopełnienie po prawej stronie: 5px; rozmiar tła: 100%; po prawej stronie, rgba(255, 255, 255, 0), biały 50%, biały)
Lewa strona lasu była ciemna i pogrążona w cieniu; prawa, mokra, błyszcząca, połyskująca w słońcu, lekko kołysana na wietrze. Wszystko kwitło; słowiki szczebiotały i turlały się, raz blisko, raz daleko.
Witam wszystkich, nazywam się Anna Blok i dziś porozmawiamy o tym, jak przyciąć zdjęcia bez użycia programów graficznych.
Przede wszystkim na stronach, gdzie treść zawierająca obrazy najprawdopodobniej nie zostanie przycięta dla żadnego konkretnego bloku.
Uderzający przykład: blog na WordPressie.
Załóżmy, że chcesz, aby okładka artykułu miała proporcje 1:1 (kwadrat). Twoje działania:
Kiedy odwiedzisz witrynę, zobaczysz oczekiwany wynik.
Ale załóżmy, że zapomniałeś przyciąć obraz w Photoshopie i pobrałeś losowy obraz jako okładkę z Internetu, co się wtedy stanie?! Zgadza się, układ się zepsuje. A jeśli w ogóle nie korzystałeś z CSS, obraz HD może całkowicie zablokować cały widok tekstu. Dlatego ważne jest, aby móc przycinać obrazy, kiedy Pomoc CSS style.
Przyjrzyjmy się różnym sytuacjom, jak można to zaimplementować nie tylko przy użyciu CSS, ale także SVG.
Spróbujmy przyciąć obraz umieszczony za pomocą obrazu tła. Stwórzmy mały znacznik HTML
Przejdźmy do stylizacji CSS. Używając obrazu tła dodajemy obraz, określamy ramki naszego obrazu, wyśrodkujemy obraz za pomocą położenia tła i ustawiamy rozmiar tła:
jpg);
pozycja tła:środek środek;
Załóżmy, że nadal mamy ten sam kontener box, w którym znajduje się znacznik img z obrazem, któremu teraz nadamy styl.
Wyśrodkujemy także nasz obraz względem obiektu, który stworzymy. I używamy dość rzadko używanej właściwości: dopasowanie obiektu.
Pole ( pozycja: względna; przepełnienie: ukryty; szerokość: 300 pikseli; wysokość: 300 pikseli; ) .box img ( pozycja: bezwzględna; góra: 50%; lewa: 50%; transformacja: tłumaczenie (-50%, -50%); szerokość: 300 pikseli; wysokość: 300 pikseli; dopasowanie obiektu: okładka)
Moim zdaniem jest to najlepsza metoda. Jest idealny dla blogów, jeśli w postach używasz obrazów o zupełnie innych proporcjach.
Więcej o HTML i CSS możesz dowiedzieć się tutaj:
W tej chwili możemy również utworzyć kadrowanie obrazów, jeśli wstawiamy je do elementów SVG. Weźmy na przykład okrąg. Możemy stworzyć SVG za pomocą tagów. Utwórz znacznik obramowania SVG, który będzie zawierał znacznik koła i znacznik wzoru. W znaczniku wzoru zapisujemy znacznik obrazu. Podajemy w nim atrybut xlink:href i dodajemy obraz. Dodamy także atrybuty szerokości i wysokości. Ale to nie wszystko. Będziemy musieli dodać wartość wypełnienia. Aby naszą pracę można było uznać za zakończoną, do tagu image dodamy pomocniczy atrybut keepAspectRatio, który pozwoli nam wypełnić nasz obraz „od końca do końca” po całym okręgu.
Nie mogę nazwać tej metody uniwersalną. Można go jednak zastosować w wyjątkowych przypadkach. Na przykład, jeśli poruszyliśmy temat bloga, to ta metoda idealnie pasowałaby do awatara autora, który pisze artykuł.
Więcej o HTML i CSS możesz dowiedzieć się tutaj:
Wyniki:
Przyjrzeliśmy się 3 metodom przycinania obrazów na stronach internetowych: przy użyciu obrazu tła, przy użyciu tagu img i powiązanego ze wzorcem svg z osadzaniem obrazy rastrowe za pomocą tagu obrazu. Jeśli znasz inne metody przycinania obrazu za pomocą SVG, podziel się nimi w komentarzach. Wiedza o nich przyda się nie tylko mnie, ale także innym.
Nie zapomnij zadać pytań dotyczących układu lub rozwoju front-endu profesjonalistom z FrontendHelp online.
W niektórych przypadkach zawartość bloku pojawia się poza granicami elementu, nakładając się na niego. Aby kontrolować zachowanie elementy blokowe wykorzystywana jest właściwość overflow, która określa, w jaki sposób powinna być wyświetlana treść wykraczająca poza granice bloku.
Korzystając z właściwości klip, możesz przyciąć element do określonych wymiarów.
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ą.
| Wartości: | |
| widoczny | Wartość domyślna. Cała zawartość staje się widoczna niezależnie od rozmiaru bloku kontenera. Możliwe jest nakładanie się zawartości sąsiednich bloków. |
| zwój | Dodaje paski przewijania w obszarze wyświetlania elementu, które pojawiają się nawet wtedy, gdy zawartość mieści się w bloku. Wymiary kontenera nie ulegają zmianie. |
| automatyczny | Dodaje paski przewijania tylko wtedy, gdy jest to konieczne. |
| ukryty | Ukrywa zawartość wykraczającą poza granice bloku. Może ukryć część treści. Stosowany do bloków kontenerowych zawierających elementy pływające. Zapobiega również wyświetlaniu tła lub obramowań pod elementami pływającymi (które mają ustawioną właściwość pływającą: lewy / prawy;. Nie powoduje to zmiany rozmiaru kontenera. |
Ryż. 1. Przytnij zawartość bloku za pomocą właściwości overflow Składnia: div ( szerokość: 200px; wysokość: 150px; overflow:Hidden; ) 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; )
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; )
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łą.
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 podobne przypadki Sensowne jest przycinanie 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.
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 ten przykład pokazany 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.
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ądarce Internet Explorera 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 łączyć tylko z gładkie tło i na wszelki wypadek obraz tła gradient nad tekstem przyciągnie Twoją uwagę.
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, także starsze wersje 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
Wynik tego przykładu pokazano na ryc. 3.
Ryż. 3. Tekst z wielokropkiem
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.
