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

Front-end 4 minuty czytania

Podejrzewam, że pewna część z nas, a szczególnie te osoby, które na co dzień zajmują się tworzeniem dynamicznych stron internetowych zostali postawieni w sytuacji gdzie nie chcemy wyświetlać całego tekstu umieszczonego w danym elemencie, a pewny jego fragment, dostosowany do naszego kontenera.

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ść.

W takiej sytuacji jesteśmy w stanie ograniczyć ten tekst do na przykład 30 słów, ale nie jest to rozwiązanie idealne, bo chyba każdy zgodzi się, że może on mieć zupełnie różną długość w zależności co tam zostało umieszczone.

W takim razie co możemy z tym zrobić?

Najprościej będzie wykorzystać jedną z dwóch opcji, pierwsza to kod CSS, który niestety działa różnie (jak wszystkie nowe style :c), druga to z kolei jedna z wielu bibliotek JavaScriptu. Nie przedłużając przejdźmy do konkretów:

Sposób z kodem CSS:

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

div > p {
    display: -webkit-box;
    max-height: 75px;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;

    font-size: 15px;
    line-height: 25px;
}

Przygotowaliśmy tu 2 scenariusze, które działają jednocześnie w zależności od przeglądarki:

  1. Właściwość line-clamp jest obsługiwana i dzięki temu jesteśmy w stanie użyć jej, aby ograniczyć tekst do konkretnej liczby linii dodając na jego końcu „…” za pomocą text-overflow: ellipsis. Oczywiście na przykład w tym miejscu możesz sprawdzić gdzie line-clamp działa.
  2. Właściwość nie jest obsługiwana i aby ograniczyć ilość naszego tekstu musimy bazować na wysokości paragrafu (w tym przypadku jej maksymalną wartość ustawiliśmy na 75px). W praktyce daje to ten sam efekt, ale na końcu tekstu nie pojawiają się 3 kropki, co może sprawiać wrażenie, że nic dalej nie ma.

Dodatkowo nie mogło się obyć bez overflow: hidden, ustalenia wielkości linii, fontu oraz co ważne ustawienia display: -webkit-box dla przeglądarek obsługujących właściwość line-clamp. Tutaj widać to w akcji:

See the Pen Line-clamp – CSS by Robert Orliński (@ROrlilnski) on CodePen.

I tak oto możemy rozwiązać nasz problem. Widzimy jednak, że coś takiego może nie wystarczać, dlatego sprawdźmy jeszcze jedną opcję.

Sposób wykorzystujący kod JavaScript.

Istnieje kilka bibliotek pozwalających nam na ograniczenie długości tekstu do konkretnej liczby linii. Oczywiście faktem jest, że możemy stworzyć coś takiego samodzielnie, ale czy warto wymyślać koło na nowo? Na pewno jeśli chcielibyśmy się nauczyć czegoś nowego. 🙂

Tym razem jednak przyjmijmy, że zamierzamy zaimplementować tego typu efekt jak najszybciej. 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 lub line-clamp (tak wiem odkrywczo). W takim razie jak jej używać? Już pokazuję:

See the Pen Line-clamp – JavaScript by Robert Orliński (@ROrlilnski) on CodePen.

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ć!

Podsumowanie

Jak widać sposoby wymienione powyżej pozwalają osiągnąć zbliżony efekt, dlatego już po naszej stronie stoi wybór konkretnego narzędzia. Osobiście bardziej przypadła mi do gustu pierwsza opcja.

Oczywiście daj znać, które rozwiązanie jest dla Ciebie najlepsze, a jeśli znasz coś lepszego, to proszę podziel się w komentarzu! 🙂

Komentarze

Może dodasz coś od siebie?