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

tutoriale

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



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ż

Kończące się tło strony w przypadkowych miejscach... Czasami podczas tworzenia strony internetowej zdarza się, że w nadrzędny (okalający) element (np. div), w którym znajduje się nasze tło kończy się szy...
Animowana ikona „Hamburger” menu Jak zapewne każdy z was zauważył, że na niektórych stronach internetowych (głównie mobilnych) menu pokazuje się dopiero po kliknięciu w ikonę (trzy li...
Zmiana wielkości liter z pomocą CSS – text-t... Właściwość text-transform (z języka ang. transformacja tekstu) jest jedną z popularniejszych metod modyfikacji tekstu. Zadaniem własności jest zmiana ...
Efekt Zoom Hover po najechaniu kursorem na zdjęcie... Podczas tworzenia stron internetowych często najważniejszą kwestią jest dobranie odpowiednich efektów aktywowanych np. po najechaniu kursorem myszy lu...