[JavaScript][PHP] Skracanie tytułu do szerokości diva Opcje

[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

Ten post edytował com 2.01.2014, 15:02:46

[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.

Ten post edytował sowiq 2.01.2014, 15:08:45

[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).

Ten post edytował sowiq 2.01.2014, 16:44:09

[PrinceOfPersia]

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]

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

[CSS] pobierz, plaintext 
text-overflow: ellipsis;
[CSS] pobierz, plaintext 

Cool (IMG:style_emoticons/default/smile.gif) Nie znałem tego wcześniej. Całe życie człowiek się uczy. + Ci za to @PrinceOfPersia (IMG:style_emoticons/default/smile.gif)