Skrócenie zbyt długiego tekstu z użyciem CSS text-overflow

tutoriale

Kategoria wpisu Kurs CSS, Kursy, Tekst Tagi: , , on przez .



Reading Time: 1 minute

Tym razem chcę pokazać jak skrócić tekst nie mieszczący się bloku np. tytuł wpisu na blogu do jednej linii co może być przydatne na responsywnej stronie.

Przeważnie wykorzystuje się do tego celu PHP, JavaScript lub inne tego typu języki skryptowe jednak nie są to jedyne metody, dzięki którym możemy skrócić zbyt długi tekst. W CSS do przycinania tekstu służy funkcja text-overflow: ellipsis. Oczywiście nie jest to jedyne ustawienie text-overflow jednak to dzięki niemu uzyskamy pożądaną długość tekstu.

Funkcja ta nie wyświetla nam jednak określonej liczby liter a jedynie taką długość tekstu jaki zmieści się w danym wersie.

przykład:

Przed skróceniem

Zwykły trochę przydługawy tekst bez lorem ipsum w treści

Po skróceniu

Zwykły trochę przydługawy tekst bez lorem ipsum w treści

CSS dla obu przykładów:

Trochę objaśnień

white-space: nowrap – powoduje, że tekst nie może przejść do następnej linii,
overflow: hidden – ukrywa wszystko co wychodzi, znajduje się poza kontenerem,
text-overflow: ellipsis – dodaje kropki na końcu wiersza i ucina tekst.

Dodatkowe tagi:
białe znaki
układanie, formatowanie tekstu na stronie internetowej
skracanie długiego akapitu
przycinanie nie mieszczącego się tekstu
dodawanie efektu urwanego fragmentu opisu

Przeczytaj również

10 responsywnych frameworków CSS (RWD) W ciągu ostatnich kilku lat budowanie stron z pomocą frameworków CSS stało się bardzo popularne. W wcześniejszych wpisach opisywałam już jeden z popul...
Obramowanie na stronie – CSS Obramowanie (tzw. ramka) stanowi istotny element strony internetowej nie tylko w przypadku tabel, może ono np. stanowić bardzo ciekawą dekoracją (np. ...
Nagłówki i podział tekstu w plikach stron WWW Podczas umieszczania tekstu na stronie internetowej bardzo istotne jest by tekst był odpowiednio sformatowany. Zadajcie sobie pytanie jakie teksty czy...
Zmiana koloru obrazka z użyciem CSS – właści... Obecnie istnieje kilka sposobów na zmianę koloru obrazka bez użycia programów do obróbki grafiki. Jedną z takich metod jest zastosowanie filtrów grafi...