Jak ukryć część tekstu za pomocą CSS lub JavaScript

Repozytorium z kodem i podgląd na żywo

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.

Gdzie wykorzystuje się ukrywanie tekstu

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.

CSS – jedna linijka tekstu zakończona wielokropkiem

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.

CSS – zasłonięcie części tekstu za pomocą gradientu

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.

JavaScript – ograniczenie liczby znaków

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.

CSS – szybkie rozwiązanie nie dla wszystkich przeglądarek

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.

Uwaga na SEO

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.