Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

> [JavaScript][PHP] Skracanie tytułu do szerokości diva
bahh
post
Post #1





Grupa: Zarejestrowani
Postów: 261
Pomógł: 2
Dołączył: 13.05.2012

Ostrzeżenie: (0%)
-----


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?
Go to the top of the page
+Quote Post
 
Start new topic
Odpowiedzi
PrinceOfPersia
post
Post #2





Grupa: Zarejestrowani
Postów: 717
Pomógł: 120
Dołączył: 18.04.2009

Ostrzeżenie: (0%)
-----


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/

Go to the top of the page
+Quote Post
bostaf
post
Post #3





Grupa: Zarejestrowani
Postów: 374
Pomógł: 79
Dołączył: 6.04.2010
Skąd: Ostrów Wielkopolski

Ostrzeżenie: (0%)
-----


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

  1. text-overflow: ellipsis;

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)
Go to the top of the page
+Quote Post

Posty w temacie


Reply to this topicStart new topic
2 Użytkowników czyta ten temat (2 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 



RSS Aktualny czas: 8.10.2025 - 08:12