HTML5 & CSS3Webdesign & UX

Automatyczne skracanie tekstu w CSS

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.

<div class="task">
	<h4>Dłuuuuuuuugi opis, który pewnie nie zmieści się w kontenerze rodzica</h4>
	<p>Tutaj opis, który jest jeszcze dłuższy, a co za tym idzie, zajmuje więcej miejsca na ekranie</p>
</div>

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.

.task
{
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
  • 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:cssDaj Się Poznać 2017ellipsisskracanie

komentarzy 10

Zostaw odpowiedź