Skracanie tekstu do N linijek + link "więcej"
Problem
Ostatnio zdarzyło mi się, że klient uparcie chciał by na stronie wyświetlał się dokładnie 4 linijki z wpisanego testu i by na końcu pojawiało się "więcej" prowadzące do rozwinięcia artykułu.
Ile razy tłumaczyłem klientowi, że niestety nie mamy kontroli nad tym ile tekstu się wyświetli, ponieważ nawet jeżeli ograniczę, że ma pojawiać się tylko 250 znaków, to i tak literka "W" zajmuje więcej niż "I" i wpis składający się z samych "szerokich" liter i tak znów nie wpasuje się w szablon.
Od razu nasuwa się jedno rozwiązanie - użyć czcionki o stałej szerokości znaków np. Courier New. Niestety, czcionka ta nie grzeszy szczególną pięknością.
Ziell na swoim blogu poruszył temat opisując własność CSS "text-overflow". Jednak rozwiązanie to ma swoje (wypunktowane w w/w poście) minusy, które skreślały je dla tego konkretnego zastosowania.
Tekst, który miał być wyświetlony nie zawierał żadnych znaczników HTML - żadnych akapitów, nowych linijek - pisany "ciurkiem" i w 100% przypadków zajmował ponad 4 linijki - dlatego rozwiązanie, które zastosowałem jest dla tego konkretnego przypadku idealne.
Rozwiązanie
Rozwiązanie może jest mało eleganckie - ale ma dwie niewątpliwe zalety:
- działa pod każdą z testowanych przeglądarek
- wyświetla się (chociaż "niepoprawnie") w przeglądarkach nie obsługujących CSS
- jest wygodne dla SEO, chociaż jak się Google połapie, to może dać po łapach ;-)
Poniżej efekt zabiegu, jaki poczyniłem, u niektórych już na pierwszy rzut oka można będzie dowiedzieć się, co i jak działa:
Jak widać (mam nadzieję) zamierzony efekt został osiągnięty - cały przykład tak na prawdę jest dużo dłuższy i składa się z dwóch tagów:
p {
width: 600px;
height: 40px;
border: 1px solid #D3D3D3;
overflow: hidden;
position: relative;
}
Powyższy kod ustala wymiary kontenera (akapitu), dodaje ramkę i ustala pozycjonowanie na relatywne. Dodatkowo parametr overflow gwarantuje nam, że tekst nie "wyleje" się z elementu tylko zostanie przycięty do odpowiednich rozmiarów.
a {
position: absolute;
bottom: 5px;
right: 3px
display: block;
padding-left: 5px;
background: white;
}
Tu dla odmiany dodajemy link do pełnej treści wiadomości, który ustawiamy używając position: absolute w dolnym prawym rogu kontenera, nadajemy mu wyświetlanie jako element blokowy (by padding działał poprawnie) i ustalamy białe tło by przesłonił znajdujący się pod nim tekst.
Przeglądarki, które obsługują CSS wyświetlą ładne dwie linijki i link "więcej", pozostałe wyświetlą pełen tekst a następnie link.
Jak już zaznaczyłem, rozwiązanie to działa tylko wtedy, gdy mamy pewność, że tekst na 100% wypełni nasz kontener, w innym wypadku efekt może być następujący:
Komentarze
Komentarz użytkownika Wasacz
04 07 2009Dobrze jeszcze by było dodać line-height, wtedy można ładnie dopasować wysokość kontenerka i mieć pewność, że zawsze będzie miał wysokość dwóch (czy ilu tam) wysokości linii.
Komentarz użytkownika Adriano
04 07 2009Można coś w js stworzyć, aby nie ucinało słów w połowie (jeśli linie muszą być równe w poziomie). Najłatwiej będzie jednak wysunąć 'więcej' jeszcze w prawo, aby nie znajdowało się bezpośrednio nad blokiem z tekstem - problem dzielonych słów znika (nie wiem jak z estetyką w projekcie, ale wszytko da się dopasować).
3
Komentarz użytkownika mina86
04 07 2009Wysokość lepiej podać w em, a nie pikselach, jeżeli to mają być cztery linie.
4
Komentarz użytkownika iss
05 07 2009Jak ktoś słabowidzący powiększy sobie tekst, to się zdziwi czemu ostatni wiersz widać tylko do połowy, zatem em powinno być lepsze.
I tu jest miejsce na zagadkę - czemu 5em wcale nie pokazuje pięciu wierszy?
BTW <p> to raczej akapit, a nie paragraf.
Komentarz użytkownika BTM
05 07 2009@mina86: pewnie, że lepiej - tu na potrzeby przykładu podałem w pikselach, bo szybciej ;-)
@iss: jakiej przeglądarki używasz? Firefox i chyba większość ma full-page-zoom i wygląda ok. A co do akapit/paragraf - masz rację, już zmieniam :-)
Komentarz użytkownika BTM
05 07 2009@Adriano: w JS można by zaszaleć i napisać funkcję, która ucinała by słowa, aż kontener nie miał by wysokości takiej, by nie przekraczała 2 linijek - ale jeżeli jest rozwiązanie, które działa sprawnie z wyłączoną obsługą JS, to dla mnie wystarczy ;-)
7
Komentarz użytkownika mina86
05 07 2009iss, powodów może być kilka, np. ustawienie "padding", czy "line-height" większe od 1em.
8
Komentarz użytkownika iss
05 07 2009@BTM
Fx 3.5, ale używam jedynie powiększania tekstu. Niestety skalowanie grafiki w Fx pod Linuksem jest realizowane inaczej niż w Win (coś z Cairo i X.org) i obecnie powiększone obrazki mają bolesną dla oczu pikselozę.
@mina86
Racja. Padding wyzerowałem, ale zapomniałem sprawdzić line-height.
9
Komentarz użytkownika D4rky
05 07 2009Zapomniałeś dopisać do CSS pikselową wysokość tekstu, w innym wypadku ktoś będzie miał niestandardowe ustawienia i się zepsuje ;) Oprócz tego jest jeszcze Riddle - http://perfectionorvanity.com/2006/07/31/przycinanie-dlugich-linijek-tekstu/
Komentarz użytkownika Wasacz
05 07 2009Jeśli dobrze liczę, to mój komentarz został powtórzony 3 razy ;>
11
Komentarz użytkownika D4rky
05 07 2009Wasacz - pierwszy komentarz to się zlewa z tłem :P
Komentarz użytkownika BTM
05 07 2009@D4rky: sposób Riddla został poruszony we wpisie Ziella, do którego linkuję. Poza tym, w/w sposób nie pozwala na dodanie "więcej", chyba, że coś przegapiłem?
Komentarz użytkownika riddle
05 07 20095em nie pokaże pięciu linii, bo line-height zapewne nie jest ustawione na 1em (tekst byłby zbyt ściśnięty). Jeśli line-height jest 150%, to height powinno być 6em dla czterech linijek.
Komentarz użytkownika Pawkow
11 07 2009"Sposób Riddla" jak to określacie zadziała, owszem, dla jednej linii tekstu.
Sposób BTMa owszem, działa, ale jeśli niczego nie przeoczyłem nakładający się absolutnie link może przyciąć wyraz np. w połowie - lipa. Warto by było przynajmniej dodać jakiś półprzezroczysty gradient który ładnie zakończy tekst.
Co do JS - jeżeli szerokość elementu ma być stała, nie dopasowana do szerokości to można by było w zasadzie pokusić się o literację wyrazów bądź linii tekstu, chociaż i to wydaje się mało rozsądne - nie ma idealnego rozwiązania, niestety, a już na pewno bez JS. W każdym bądź razie pomysł podrzucony przez autora jest dobry i w zasadzie oczywisty, najbardziej logiczny i banalny w implementacji.
Komentarz użytkownika Pawkow
11 07 2009Nie ma edycji komentarzy ...
Chyba jednak się da :) Opiszę mam nadzieję wszystko później u siebie jak tylko posprawdzam, niestety, nie mam pomysłu jak to zrobić bez duplikowania treści ...
Komentarz użytkownika BTM
11 07 2009@Pawkow: właśnie dlatego napisałem, że niektórzy od razu zobaczą na czym polega problem - jeżeli masz inny rozmiar czcionki to ucina literki. Pomysł z gradientem jest całkiem fajny, a od JS wolałbym się trzymać z daleka jeżeli tylko można ;-)
Edytować komentarze można zawsze z panelu Joggera - muszę jeszcze parę rzeczy zmienić w szablonie, to się edycję też doda.
