Skrócenie nie mieszczącego się tekstu na stronie – CSS text-overflow

Czas czytania: < 1 minut

Tym razem chcę pokazać jak skrócić tekst nie mieszczący się bloku. Chodzi np. sytuację kiedy tytuł wpisu na blogu chcemy by zawsze był napisany w jednej linii.

Ograniczenia tego typu przeważnie wykonuje się w PHP, JavaScript lub innym tego typu języku skryptowym. Jednak nie są to jedyne metody, dzięki którym możemy skrócić zbyt długi tekst.

Jak skrócić tekst z pomocą CSS

W CSS do przycinania tekstu służy funkcja text-overflow a konkretnie z ustawieniem

• text-overflow: ellipsis.

Oczywiście nie jest to jedyne ustawienie text-overflow jednak to dzięki niemu uzyskamy pożądaną długość tekstu. Właściwość ta nie wyświetla nam jednak określonej liczby liter a jedynie taką długość tekstu jaki zmieści się w danym wersie.

Jak to działa w praktyce – przykład:

See the Pen text-overflow by Aura (@Julka85) on CodePen.dark

Tekst z powyższego przykładu to:

A bit too long text that must be shortened to fit

Jednak jak widzicie dzięki zastosowaniu CSS widzimy jedynie jego fragment. Poniżej macie ogólny kod kontenera. Kontener ten ma określoną szerokość i ukrycie za długiej części tekstu z wyłączeniem scroll.

.radioButtondemoBasicUsage .pdiv {
    width: 200px;
    white-space: nowrap;
    border: 1px solid black;
    overflow:hidden;
    margin: 15px 0;
}

Do tego kontenera dodajemy text-overflow w celu uzyskania efektu.

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, dlatego nie widać jak długi jest tekst.
• text-overflow: ellipsis – dodaje kropki na końcu wiersza i ucina tekst.

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