Automatyczne skracanie tekstu w CSS


16 marca 2017 / Michał Kortas


Dzisiaj bardzo krótki wpis, w którym przedstawię Ci mały CSSowy ficzer (text-overflow: ellipsis) do eleganckiego ucinania tekstu, który nie mieści się we wskazanym miejscu – na przykład w kontenerze rodzica. Możliwość tę wykorzystywać będę w aplikacji projektowanej na potrzeby DSP2017.

Chciałbym, aby lista zadań wyglądała elegancko, zawsze w niezmienionej formie. Większa ilość tekstu mogłaby temu zaszkodzić, a dzięki poniższemu prostemu zabiegowi całość wygląda bardzo estetycznie.

Automatyczne skracanie tekstu w CSS - text-overflow: ellipsis

Automatyczne skracanie tekstu w CSS – text-overflow: ellipsis

Rozwiązanie problemu

Zakładam posiadanie poniższego kodu HTML, w dużym uproszczeniu, porównując to do przykładu z obrazka.

Bez dodatkowego kodu CSS, otrzymałem źle wyglądający efekt.

Tekst nie mieści się w oknie

Tekst nie mieści się w oknie

Jest na to rada w postaci CSS.

  • 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

Szczególnie przydatna rzecz, kiedy w grę wchodzi responsywność.

Skracanie tekstu przy responsywnym szablonie

Skracanie tekstu przy responsywnym szablonie


Tagi:


11 odpowiedzi na “Automatyczne skracanie tekstu w CSS”

  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?

Dodaj komentarz

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