Kończenie zbyt długiego tekstu wielokropkiem, czyli nieznane zakątki CSS

css-logo

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:

 

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:

 

Demo

zwykłe zachowanie:

Buzzword – słowo lub fraza, która jest używana w celach marketingowych

 

 

zwykłe zachowanie z white-space: nowrap:

Buzzword – słowo lub fraza, która jest używana w celach marketingowych

 

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

Buzzword – słowo lub fraza, która jest używana w celach marketingowych

 

zastosowanie text-overflow: ellipsis:

Buzzword – słowo lub fraza, która jest używana w celach marketingowych

 

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