Automatyczne skracanie tekstu w CSS – sposób na jedną linię i dłuższy akapit


10 grudnia 2020 / Michał Kortas


Pytaliście w komentarzach jak skracać tekst znajdujący się w kilku wierszach, w akapicie. Jest to obecnie możliwe również za pomocą CSS. Postanowiłem więc odświeżyć ten wpis z przed lat i dostosować go do bieżących możliwości przeglądarek. Pierwsza część zawiera to, co było tutaj do tej pory – skracanie tekstu w jednej linii. Druga część poradnika prezentuje sposób na ucinanie rozbudowanego bloku tekstowego bez stosowania skomplikowanych zabiegów.

Skracanie tekstu w jednej linii

Tworząc aplikację wyświetlającą listę zadań zastosowałem zabieg polegający na użyciu parametru text-overflow: ellipsis. Niezależnie od długości tekstu wpisanego przez użytkownika, interfejs wyglądał niezmiennie. Przeglądarka skraca zbyt długie ciągi znaków, umieszczając na końcu (tylko, gdy potrzeba) trzy kropki.

Automatyczne skracanie tekstu w CSS - text-overflow: ellipsis

Automatyczne skracanie tekstu w CSS – text-overflow: ellipsis

Jak skrócić tekst w jednej linii?

Załóżmy, że kod odpowiadający za jeden element zadania powyżej, w dużym uproszczeniu, wygląda w ten sposób:

Bez dodatkowego kodu CSS, efekt jest następujący.

Tekst nie mieści się w oknie

Tekst nie mieści się w oknie

Korzystając z wartości parametrów przedstawionych w listingu otrzymamy skrócony tekst.

Co oznaczają te parametry?

  • white-space: nowrap – wymusza brak łamania tekstu na wiersze,
  • overflow: hidden – ukrywa wszystko to, co wychodzi poza kontener,
  • text-overflow: ellipsis – dodaje kropki na końcu wiersza, aby estetycznie go „uciąć”.
Skrócony tekst za pomocą CSS

Skrócony tekst za pomocą CSS

Będzie to szczególnie przydatna rzecz, kiedy w grę wchodzi responsywność.

Skracanie tekstu przy responsywnym szablonie

Skracanie tekstu przy responsywnym szablonie

Skracanie tekstu w akapicie

W tym przypadku używam parametru -webkit-line-clamp.

Poniżej przygotowałem 3 akapity z długim tekstem.

Kod CSS, który skróci teksty do wybranej liczby linii wygląda w ten sposób.

W tym przypadku skróciłem go do 4 linii – -webkit-line-clamp: 4;.

A oto efekt.

Skracanie tekstu w wieloliniowym akapicie

Skracanie tekstu w wieloliniowym akapicie

Wsparcie

Zapytacie – co ze wsparciem ? Jest nieźle. Na dzień dzisiejszy wpierają to już wszystkie wiodące przeglądarki.

Wsparcie przeglądarek dla line-clamp

Wsparcie przeglądarek dla line-clamp

 


Tagi:


15 odpowiedzi na “Automatyczne skracanie tekstu w CSS – sposób na jedną linię i dłuższy akapit”

  1. Martin pisze:

    Ciekawe, ale zupelnie niepraktyczne. Zero wsparcia ze strony IE (takze Edge) oraz Firefoxa.

  2. Jarek pisze:

    Proste i przydatne. W sumie kiedyś o tym wiedziałem, ale zapomniałem

  3. Damian pisze:

    Ciekawe ale nie praktyczne

  4. Rafał pisze:

    A co właśnie jeśli chcemy mieć np 3 linie tekstu i dopiero później owe skracanie? Ostatnio mierzyłem się właśnie z tym problemem… o ile tekst chcemy ucinać w jednej linii to nie ma najmniejszego problemu, gorzej jeśli linii jest więcej. Da się zgrabnie ugryź samym CSSem czy tutaj już tylko JS bądź PHP pomoże?

  5. Greg pisze:

    A ja popełniłem coś takiego. Skraca nie tylko tekst, ale listy, listy inline, tabele itd. ;) https://github.com/tomik23/show-more#readme
    Oczywiście nie jest to css ale działa wszędzie i wiele nie waży.

  6. SpeX pisze:

    A da się do tego dodać efekt, iż jak jest skrócone, to przy :hover pojawiał się dymek z pełną treścią?

Pozostaw odpowiedź Michał Kortas Anuluj pisanie odpowiedzi

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *