Uwaga! Trwają prace nad nową wersją serwisu. Mogą występować przejściowe problemy z jego funkcjonowaniem. Przepraszam za niedogodności!
🏆 Lubisz podcast Pierwsze kroki w IT? Oddaj swój głos w rankingu: TOP 10 polskich podcastów o IT! 🏆
Na ukrycie części tekstu można znaleźć wiele sposobów – zwłaszcza jeśli mamy możliwość skorzystania z JavaScriptu. W artykule przeczytasz o trzech rozwiązaniach za pomocą CSS i jednym dla JS. Załączam też repozytorium, żebyś mógł samodzielnie przetestować kod.
Repozytorium znajdziesz na moim GitHubie, a podgląd projektu stworzyłem za pomocą GitHub Pages. Możesz więc śledzić poniższy artykuł i jednocześnie oglądać lub testować przedstawione rozwiązania.
Chyba najczęściej spotykane miejsce to podgląd treści artykułów, opisów produktów czy zajawek odcinków podcastu – widzimy kilka linijek wstępu, a do reszty dostajemy się albo przez przejście na podstronę elementu, albo przez kliknięcie przycisku „rozwiń”.
Junior front-end developer może popisać się umiejętnością ukrywania części tekstu chociażby w swoim portfolio, np. ograniczając długość widocznego opisu projektów.
Jest to najprostsze, a zarazem najmniej elastyczne rozwiązanie. Tekst ucinany jest już w pierwszej linijce niezależnie od wysokości kontenera. Jeśli jednak właśnie na takim rozwiązaniu nam zależy, wystarczy zaledwie mały fragment CSS-a:
.examples__text--oneline { overflow: hidden; position: relative; text-overflow: ellipsis; white-space: nowrap; }
Wada/zaleta: w każdej rozdzielczości zawsze otrzymujemy tylko jedną linijkę tekstu.
To rozwiązanie uniezależnia nas od liczby znaków i wersów, a przy okazji wygląda całkiem estetycznie. Ilość widocznego tekstu reguluje wysokość elementu – w przykładzie jest to 80 px – oraz gradient (polecam generator gradientu).
Do stworzenia przesłony z gradientu wykorzystujemy pseudoelement after (moglibyśmy bez przeszkód użyć też before).
.examples__text--gradient { height: 80px; overflow: hidden; position: relative; } .examples__text--gradient::after { background: linear-gradient( 0deg, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0.8) 60%, rgba(255, 255, 255, 0.2) 100% ); bottom: 0; content: ''; height: 50%; left: 0; position: absolute; width: 100%; }
Wada/zaleta: możemy regulować wysokość elementu w stylach.
To rozwiązanie idealnie sprawdzi się, gdy jesteśmy ograniczeni liczbą znaków. Wystarczy wyszukać element, którego tekst chcemy skrócić, i użyć metody .substr() jak poniżej.
Ciekawostka: wielokropek to nie to samo co trzy kropki. Jest to osobny znak i w obrębie jednego fontu często od trzech kropek postawionych jedna za drugą będzie różnił odstępami. Dlatego użyłem kodu UTF reprezentującego wielokropek.
// wyszukuję element z tekstem const textEl = document.querySelector('.examples__text--characters'); // ograniczam liczbę znaków do 400 i dodaję wielokropek const cutText = textEl.innerText.substr(0, 400) + '\u2026'; // wprowadzam skrócony tekst do elementu textEl.innerText = cutText;
Wada/zaleta: zawsze wyświetlamy tę samą liczbę znaków.
Byłoby to świetne rozwiązanie, gdyby nie różne wsparcie przeglądarek dla kilku właściwości CSS. Jeśli chcesz więc wspierać ich starsze lub mniej popularne wersje, wybierz któreś z wyżej przedstawionych rozwiązań (lub stwórz własne), a to potraktuj jako ciekawostkę.
Miej także na uwadze, że właściwość box-orient nie jest już wspierana, dlatego przy jej stosowaniu możesz napotkać problemy, jak np. pewien programista w wątku na Stack Overflow.
Tak czy inaczej, w przypadku tego rozwiązania jesteśmy niezależni od ilości znaków i wierszy. Wielokropek jest stawiany przy ostatnim znaku, który zmieścił się wewnątrz elementu HTML.
.examples__text--fast { -webkit-box-orient: vertical; -webkit-line-clamp: 4; display: -webkit-box; overflow: hidden; }
Wada/zaleta: zawsze wyświetlamy tę samą (ustawioną w stylach) liczbę wersów, więc wysokość elementów się nie zmienia.
Treść niedostępna dla użytkownika, np. schowana pod obrazami, przesunięta poza widok za pomocą CSS, biała na białym tle, z fontem wielkości 0 itd., może obniżyć pozycję strony w wyszukiwarce, a w ostateczności nawet spowodować wykluczenie z indeksowania. Niepotrzebnie nie stosuj więc ukrywania treści, a jeśli już, to pamiętaj o dodatkowych rozwiązaniach umożliwiających dostęp do treści osobom, które np. mają wyłączony JavaScript w przeglądarce. Dobre i złe praktyki znajdziesz w wytycznych Centrum wyszukiwarki Google.
Udostępnij ten artykuł:
Zapisz się i zgarnij za darmo e-book o wartości 39 zł: Jak zostać programistą? Skuteczny przewodnik!
Jak zostać programistą? Skuteczny przewodnik
TERAZ DOSTĘPNY BEZPŁATNIE!
Cena w sklepie to 39 zł, a Ty możesz otrzymać ten e-book bezpłatnie za zapis na newsletter. To ponad 40 stron konkretów o nauce programowania i pracy w IT.