Właściwość text-overflow:ellipsis;
CSS musi być jedną z niewielu rzeczy, które Microsoft zrobił dobrze dla sieci.
Wszystkie inne przeglądarki obsługują go teraz ... z wyjątkiem Firefoksa.
Twórcy Firefoksa kłócą się o to od 2005 roku, ale pomimo oczywistego popytu na to, wydaje się, że nie są w stanie zmusić się do jego wdrożenia (wystarczyłaby nawet eksperymentalna -moz-
implementacja).
Kilka lat temu ktoś wymyślił sposób na zhakowanie Firefoksa 3, aby obsługiwał wielokropek . Hack wykorzystuje tę -moz-binding
funkcję, aby zaimplementować ją przy użyciu XUL. Dość wiele witryn używa teraz tego hacka.
Złe wiadomości? Firefox 4 usuwa tę -moz-binding
funkcję , co oznacza, że ten hack już nie zadziała.
Tak więc, gdy tylko Firefox 4 zostanie wydany (słyszę, że pod koniec tego miesiąca) wrócimy do problemu, że nie jest on w stanie obsługiwać tej funkcji.
Więc moje pytanie brzmi: czy można to obejść w inny sposób? (Staram się unikać powrotu do rozwiązania JavaScript, jeśli to w ogóle możliwe)
[EDYTUJ]
Wiele głosów pozytywnych, więc oczywiście nie jestem jedyną osobą, która chce wiedzieć, ale jak dotąd mam jedną odpowiedź, która zasadniczo mówi „użyj javascript”. Nadal liczę na rozwiązanie, które albo w ogóle nie będzie wymagało JS, albo w najgorszym przypadku użyje go tylko jako awaryjnego rozwiązania, w którym funkcja CSS nie działa. Więc zamierzam wystawić nagrodę za to pytanie, jeśli nie ma szans, że ktoś gdzieś znalazł odpowiedź.
[EDYCJA]
Aktualizacja: Firefox przeszedł w tryb szybkiego rozwoju, ale pomimo wydania FF5 ta funkcja nadal nie jest obsługiwana. A teraz, gdy większość użytkowników dokonała aktualizacji z FF3.6, hack nie jest już rozwiązaniem. Dobra wiadomość, powiedziano mi, że może zostać dodana do Firefoksa 6, który wraz z nowym harmonogramem wydań powinien pojawić się za kilka miesięcy. Jeśli tak jest, to chyba mogę to przeczekać, ale szkoda, że nie mogli tego wcześniej załatwić.
[EDYCJA KOŃCOWA]
Widzę, że funkcja wielokropka została wreszcie dodana do „Aurora Channel” Firefoksa (tj. Wersji rozwojowej). Oznacza to, że powinien teraz zostać wydany jako część przeglądarki Firefox 7, która ma się ukazać pod koniec 2011 roku. Co za ulga.
Informacje o wersji dostępne tutaj: https://developer.mozilla.org/en-US/Firefox/Releases/7
Odpowiedzi:
Spudley, możesz osiągnąć to samo, pisząc mały JavaScript przy użyciu jQuery:
Rozumiem, że powinien istnieć sposób, aby wszystkie przeglądarki obsługiwały to natywnie (bez JavaScript), ale to właśnie mamy w tym momencie.
EDYCJA Możesz również uczynić to bardziej schludnym, dołączając
css
klasę do wszystkich tych pól o stałej szerokości, powiedz,fixWidth
a następnie wykonaj coś takiego:źródło
text-overflow:ellipsis;
więc nadal mogę używać opcji CSS w innych przeglądarkach.length()
byćlength
? To własność.EDYCJA 30.09.2011
FF7 jest niedostępny, ten błąd został rozwiązany i działa!
EDYCJA 29.08.2011
Ten problem jest oznaczony jako rozwiązany i będzie dostępny w grze FF 7; obecnie ma zostać wydana 27.09.2011.
Zaznacz swoje kalendarze i przygotuj się do usunięcia wszystkich hacków, które wprowadziłeś.
STARY
Mam inną odpowiedź: czekaj .
Zespół programistów FF usilnie dąży do rozwiązania tego problemu.
Mają wstępny zestaw poprawek dla przeglądarki Firefox 6.
Spokojna, wyimaginowana, nadreaktywna osoba. Firefox jest na szybkiej ścieżce deweloperskiej. Wydanie FF6 ma nastąpić sześć tygodni po wydaniu Firefoksa 5. Firefox 5 zostanie wydany 21 czerwca 2011 r.
Więc to załatwia sprawę gdzieś na początku sierpnia 2011 ... miejmy nadzieję.
Możesz zapisać się na listę mailingową podążając za błędem z linku w pytaniu pierwotnego nadawcy.
Możesz też kliknąć tutaj ; cokolwiek jest najłatwiejsze.
źródło
Muszę powiedzieć, że jestem trochę rozczarowany, że jedynym hackiem dotyczącym przeglądarki w mojej aplikacji będzie obsługa FF4. Powyższe rozwiązanie javascript nie uwzględnia czcionek o zmiennej szerokości. Oto bardziej szczegółowy skrypt, który to wyjaśnia. Duży problem z tym rozwiązaniem polega na tym, że jeśli element zawierający tekst jest ukryty podczas uruchamiania kodu, to szerokość pola nie jest znana. To było dla mnie zerwanie umowy, więc przestałem nad nim pracować / testować ... ale pomyślałem, że opublikuję to tutaj, na wypadek, gdyby przydało się to komuś. Pamiętaj, aby przetestować to dobrze, ponieważ moje testy były mniej niż wyczerpujące. Zamierzałem dodać kontrolę przeglądarki, aby uruchamiać kod tylko dla FF4 i pozwolić wszystkim innym przeglądarkom korzystać z ich istniejącego rozwiązania.
Powinno to być dostępne tutaj: http://jsfiddle.net/kn9Qg/130/
HTML:
CSS:
Javascript (używa jQuery)
Nazywa się to następująco:
źródło
W zeszłym tygodniu też spotkałem tego gremlina .
Ponieważ zaakceptowane rozwiązanie nie uwzględnia czcionek o zmiennej szerokości, a rozwiązanie wwwhack ma pętlę While Loop, dorzucę moje 0,02 $.
Udało mi się radykalnie skrócić czas przetwarzania mojego problemu za pomocą mnożenia krzyżowego. Zasadniczo mamy formułę, która wygląda następująco:
Zmienna x w tym przypadku jest tym, co musimy rozwiązać. Zwracana jako liczba całkowita poda nową długość, jaką powinien mieć przepełniony tekst. Pomnożyłem MaxLength przez 80%, aby dać elipsom wystarczająco dużo miejsca do pokazania.
Oto pełny przykład HTML:
Rozumiem, że jest to tylko poprawka JS, ale dopóki Mozilla nie naprawi błędu, po prostu nie jestem wystarczająco inteligentny, aby wymyślić rozwiązanie CSS.
Ten przykład działa najlepiej, ponieważ JS jest wywoływany za każdym razem, gdy w naszej aplikacji ładuje się grid. Szerokość kolumn dla każdej siatki jest różna i nie mamy kontroli nad typem komputera, na którym użytkownicy Firefoksa wyświetlają naszą aplikację (czego oczywiście nie powinniśmy mieć takiej kontroli :)).
źródło
To czyste rozwiązanie CSS jest naprawdę bliskie, z wyjątkiem faktu, że powoduje pojawienie się wielokropka po każdej linii.
źródło