Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [JavaScript][PHP] Skracanie tytułu do szerokości diva
Forum PHP.pl > Forum > Przedszkole
bahh
Nie wiem czy znalazł już ktoś sposób na dynamiczne skracanie tytułów by pasowały do diva o określonej szerokości. Mam tu na myśli zastąpienie substr czymś bardziej praktycznym. Substr gdy zakończy się w "środku" polskiego znaku powstaje krzaczek. Poza tym, szerokość liter ma znaczenie. Niektóre tytuły nie zmieszczą się gdy inne tytuły są ucinane w 3/4 a mogłyby być wyświetlone w całości - ilość znaków ta sama.

Mam np. tytuł: Wypadek w Kamieniu Pomorskim. Co zeznała pasażerka?
Szerokość diva 240 px, chcę by ten tekst zmieścił się w dwóch linijkach do szerokości 240px, jak się nie zmieści to zastąpi ostatnie 3 znaki kropkami.

Czy istnieje jakiś sposób na to?
com
a google masz? http://funkcje.net/view/2/1800/index.html
sowiq
W PHP dobrze tego nie zrobisz. Zresztą i tak nie miałoby to sensu.

Rzuć okiem na rozwiązanie JS: http://jsfiddle.net/5YrQR/

[edit]
A co do substr, który tworzy krzaczki dla polskich znaków, zainteresuj się mb_substr, która działa poprawnie dla Unicode.
bahh
czy rozwiązanie js nie będzie bardzo obciążające? mam zamiar stosować to na nawet 15 tytułach
sowiq
To zależy jak dużo znaków bedzie musiał odciąć skrypt (1 znak = jedna iteracja, a w niej pobieranie wysokości elementu). Żeby przyspieszyć, możesz założyć maksymalną ilość znaków (np. 40), powyżej której na pewno tekst będzie za długi. Wtedy na początku ucinasz wszystko powyżej 40 znaków i dopiero potem wchodzisz w pętlę i ucinasz pojedyncze znaki.

Zawsze też możesz zrobić test - wrzucić 50 tytułów i sprawdzić obciążenie. Ale IMO będzie ono pomijalnie małe.

[edit]
Żeby nie być gołosłownym: http://jsfiddle.net/5YrQR/1/ Oczywiście czas będzie zależał od długości tytułów i szerokości elementu z tytułem (dlatego zmniejszyłem szerokość do 120px).
PrinceOfPersia
Cytat(bahh @ 2.01.2014, 14:54:49 ) *
Nie wiem czy znalazł już ktoś sposób na dynamiczne skracanie tytułów by pasowały do diva o określonej szerokości. Mam tu na myśli zastąpienie substr czymś bardziej praktycznym. Substr gdy zakończy się w "środku" polskiego znaku powstaje krzaczek. Poza tym, szerokość liter ma znaczenie. Niektóre tytuły nie zmieszczą się gdy inne tytuły są ucinane w 3/4 a mogłyby być wyświetlone w całości - ilość znaków ta sama.

Mam np. tytuł: Wypadek w Kamieniu Pomorskim. Co zeznała pasażerka?
Szerokość diva 240 px, chcę by ten tekst zmieścił się w dwóch linijkach do szerokości 240px, jak się nie zmieści to zastąpi ostatnie 3 znaki kropkami.

Czy istnieje jakiś sposób na to?


rozwiązanie na czystym CSS: http://jsfiddle.net/yYjh3/

bostaf
Cytat(PrinceOfPersia @ 2.01.2014, 17:55:28 ) *
rozwiązanie na czystym CSS: http://jsfiddle.net/yYjh3/

  1. text-overflow: ellipsis;

Cool smile.gif Nie znałem tego wcześniej. Całe życie człowiek się uczy. + Ci za to @PrinceOfPersia smile.gif
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.