bmat.pl

Dziś krótki wpis na temat, z którym zapewne spotkał się każdy, kto miał przyjemność zajmować się front-endem stron internetowych. Mowa o kończeniu długiej linii tekstu za pomocą wielokropka, w sytuacji gdy tekst jest za długi i wychodzi poza przydzielony obszar lub przeskakuje do następnej linii, burząc ład na niejednej stronie. Okazuje się, że jest na to prosta recepta.

Rozwiązanie

O tym, że w CSS istnieje atrybut, pozwalający na rozwiązanie tego dosyć powszechnego problemu dowiedziałem się niedawno. Wcześniej nieświadomie próbowałem mniej lub bardziej eleganckich metod na urywanie tekstu w odpowiednim miejscu. Rozwiązanie jest jednak dużo prostsze niż sztuczki wizualne czy ucinanie zdania funkcjami po stronie serwera:

#myElement {
    text-overflow: ellipsis;
}

Ograniczenia

Byłoby zbyt kolorowo, gdyby wspomniany atrybut rozwiązywał wszystkie problemy ze zbyt długim tekstem. Metoda ta działa tylko w przypadku tekstu znajdującego się w jednej linii. Zakończenie tekstu wieloliniowego wymagać będzie w dalszym ciągu bardziej złożonych operacji. Zastosowanie mogą znaleźć tu dwa inne pomysły:

• wyliczanie miejsca ucięcia tekstu i dopisanie wielokropka
• użycie na elemencie atrybutu overflow: hidden, a następnie sprytne zamaskowanie końca tekstu obrazkiem wielokropka (patrz: http://www.mobify.com/blog/multiline-ellipsis-in-pure-css/)

Demo

zwykłe zachowanie:

<div style="width: 380px; height: 40px; line-height: 40px; border: 1px dashed #000000;">
    Buzzword – słowo lub fraza, która jest używana w celach marketingowych
</div>

zwykłe zachowanie z white-space: nowrap:

<div style="width: 380px; height: 40px; line-height: 40px; border: 1px dashed #000000;
white-space: nowrap;">
    Buzzword – słowo lub fraza, która jest używana w celach marketingowych
</div>

zwykłe zachowanie z white-space: nowrap i overflow: hidden:

<div style="width: 380px; height: 40px; line-height: 40px; border: 1px dashed #000000;
white-space: nowrap; overflow: hidden;">
    Buzzword – słowo lub fraza, która jest używana w celach marketingowych
</div>

zastosowanie text-overflow: ellipsis:

<div style="width: 380px; height: 40px; line-height: 40px; border: 1px dashed #000000;
white-space: nowrap; text-overflow: ellipsis; overflow: hidden;">
    Buzzword – słowo lub fraza, która jest używana w celach marketingowych
</div>

A może Wy jesteście w posiadaniu tajemnej wiedzy i macie sposób na załatwienie problemu tekstu wieloliniowego? Dajcie znać w komentarzach 😉