Ograniczenie tekstu wyświetlanego na stronie internetowej do konkretnej liczby linii - 2 proste sposoby

Co zrobić, gdy chcemy ograniczyć ilość wyświetlanego tekstu na stronie internetowej lub w ramach tworzonej przez nas aplikacji, do konkretnej liczby linii?

Gdy wystarczy nam jedna linia - wtedy możemy użyć samej właściwości text-overflow: ellipsis i sprawa załatwiona. Troszkę gorzej gdy chcemy zostawić ich większą ilość.

Co możemy wtedy zrobić?

Najprościej będzie wykorzystać jedną z dwóch opcji.

Pierwsza to kod CSS, który w momencie gdy piszę te słowa (czyli pod koniec 2021 roku) jest dość dobrze wspierany przez przeglądarki, ale wymaga prefiksu -webkit-, przez co w przyszłości jego działanie może się jeszcze zmienić.

I dodatkowo, z racji, że właściwość bez prefiksu nie jest na razie obsługiwana, nie jesteśmy w stanie zdefiniować dla niej drugiej wartości, która pozwala ustalić tekst, który pokaże się zamiast domyślnych 3 kropek na końcu uciętego tekstu (tak jak to zostało zrobione w tym przykładzie ze szkicu specyfikacji).

Druga to z kolei bardzo przydatna biblioteka wykorzystująca JavaScript.

Sposób z kodem CSS:

W skrócie użyjemy takiego zbioru właściwości:

.text {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

1. Po pierwsze -webkit-line-clamp, które utnie nasz tekst do konkretnej liczby linii, wpisanej jako wartość (od razu używamy tutaj prefikxu -webkit-, bo tylko z nim właściwość zostanie zaaplikowana).
2. Po drugie, odpowiednie wartości dla właściwości display oraz -webkit-box-orient, które współpracują ze sobą i są wymagane, aby nasz efekt zadziałał.
3. I po trzecie, overflow: hidden, którego nasz line-clamp również potrzebuje, aby schować tekst, który ma zostać ucięty.

Po połączeniu w całość, nasz efekt prezentuje się następująco:

I tak oto możemy osiągną pożądany efekt, dzięki CSSowi!

W ramach informacji - obecny poziom wsparcia przeglądarek dla omówionego sposobu (i tym samym dla właściwości line-clamp, znajdziesz na Can I Use c:

To teraz sposób wykorzystujący kod JavaScript:

Istnieje kilka bibliotek pozwalających nam na ograniczenie długości tekstu do konkretnej liczby linii. Możemy też stworzyć coś takiego samodzielnie, ale czy warto wymyślać koło na nowo? Jeśli chcielibyśmy się nauczyć czegoś nowego, to jak najbardziej!

Natomiast tym razem jednak przyjmijmy, że zamierzamy zaimplementować tego typu efekt bardzo sprawnie. Ja w tym celu użyję Clamp.js - opcji, która w moim przypadku działała najlepiej. Oczywiście nie jest jedyna, swego czasu powstały rzeczy takie jak FTEllipsis, Shave oraz line-clamp (tak wiem odkrywczo).

W takim razie jak jej używać? Już pokazuję:

Jak widać działa to dość prosto, wymaga nawet mniej kodu niż sam CSS (poza tym, że musimy podpiąć samą bibliotekę). Wybieramy element, który ma zostać zmodyfikowany, po przecinku wpisujemy ilość linii i od tej chwili całość zaczyna działać!

Oczywiście biblioteka ta ma jeszcze kilka opcji, o których więcej poczytać możesz przeczytać w README na GitHubie biblioteki.

Interesujesz się front-endem lub programowaniem ogólnie?

Sprawdź mój newsletter!

Podsyłam tam wartościowe materiały ze świata front-endu, produktywności, programowania ogólnie, oraz tego bloga.

I swoją drogą - jeśli przed zapisem chcesz zobaczyć przykładowe wydanie newslettera, to znajdziesz je na stronie poświęconej newsletterowi ogólnie.

Twoje imię (opcjonalne)

Twój e-mail

Zapisuję się

2 zdania na koniec

Jak widać sposoby wymienione powyżej pozwalają osiągnąć zbliżony efekt, dlatego już po naszej stronie stoi wybór konkretnego narzędzia, w zależności od konkretnych potrzeb.

Na szczęście w obecnych czasach, zazwyczaj wystarczy nam możliwość pierwsza, która nie wymaga żadnych dodatkowych zasobów!