Mam zbiór elementów blokowych na stronie. Wszystkie mają ustawione odstępy, przepełnienie, przepełnienie tekstu w regułach CSS, dzięki czemu przepełniony tekst jest przycinany i używany jest wielokropek.
Jednak nie wszystkie elementy się przepełniają.
Czy mimo wszystko mogę użyć javascript do wykrycia, które elementy są przepełnione?
Dzięki.
Dodano: przykładowa struktura HTML, z którą pracuję.
<td><span>Normal text</span></td>
<td><span>Long text that will be trimmed text</span></td>
Elementy SPAN zawsze mieszczą się w komórkach, mają zastosowaną regułę wielokropka. Chcę wykryć, kiedy wielokropek jest stosowany do zawartości tekstu SPAN.
javascript
html
css
ellipsis
deanoj
źródło
źródło
Odpowiedzi:
Kiedyś musiałem to zrobić, a jedynym niezawodnym rozwiązaniem dla różnych przeglądarek, na które natknąłem się, był hack. Nie jestem największym fanem takich rozwiązań, ale z pewnością daje to poprawny wynik za każdym razem.
Chodzi o to, że klonujesz element, usuwasz wszelką szerokość obwiedni i sprawdzasz, czy sklonowany element jest szerszy niż oryginał. Jeśli tak, wiesz, że zostanie obcięty.
Na przykład używając jQuery:
Zrobiłem jsFiddle, aby to zademonstrować, http://jsfiddle.net/cgzW8/2/
Możesz nawet stworzyć własny niestandardowy pseudo-selektor dla jQuery:
Następnie użyj go, aby znaleźć elementy
Demo: http://jsfiddle.net/cgzW8/293/
Miejmy nadzieję, że to pomoże, chociaż jest hacky.
źródło
white-space: nowrap
.Wypróbuj tę funkcję JS, przekazując element span jako argument:
źródło
text-overflow:ellipsis
nim powinno byće.offsetWidth <= e.scrollWidth
Dodając do odpowiedzi italo, możesz to również zrobić za pomocą jQuery.
Ponadto, jak zauważył Smoky, możesz chcieć użyć jQuery externalWidth () zamiast width ().
źródło
Osoby korzystające (lub planujące użyć) zaakceptowanej odpowiedzi od Christiana Varga powinny mieć świadomość problemów z wydajnością.
Klonowanie / manipulowanie DOM w taki sposób powoduje przepływ DOM (zobacz wyjaśnienie na temat ponownego przepływu DOM tutaj), co jest niezwykle intensywne pod względem zasobów.
Użycie rozwiązania Christiana Vargi na ponad 100 elementach na stronie spowodowało 4-sekundowe opóźnienie ponownego przepływu, podczas którego wątek JS jest blokowany. Biorąc pod uwagę, że JS jest jednowątkowy, oznacza to znaczne opóźnienie UX dla użytkownika końcowego.
Italo Borssatto za odpowiedź powinna być przyjętym jeden, to było około 10 razy szybciej podczas mojego profilowania.
źródło
mouseenter
celu sprawdzenia, czy należy wyświetlić podpowiedź.Odpowiedź od italo jest bardzo dobra! Pozwólcie jednak, że trochę to udoskonalę:
Zgodność z różnymi przeglądarkami
Jeśli faktycznie wypróbujesz powyższy kod i użyjesz
console.log
do wydrukowania wartoście.offsetWidth
ie.scrollWidth
, zauważysz w IE, że nawet jeśli nie masz obcięcia tekstu, występuje różnica wartości1px
lub2px
występuje.Tak więc, w zależności od używanego rozmiaru czcionki, dopuszczaj pewną tolerancję!
źródło
elem.offsetWdith VS ele.scrollWidth Ta praca dla mnie! https://jsfiddle.net/gustavojuan/210to9p1/
źródło
Ten przykład pokazuje podpowiedź w tabeli komórek z obciętym tekstem. Jest dynamiczny na podstawie szerokości stołu:
Próbny: https://jsfiddle.net/t4qs3tqs/
Działa na wszystkich wersjach jQuery
źródło
Myślę, że lepszym sposobem na wykrycie tego jest użycie
getClientRects()
, wydaje się, że każdy prostokąt ma tę samą wysokość, więc możemy obliczyć liczbę linii z liczbą różnychtop
wartości.getClientRects
pracować w ten sposóbgetRowRects
działa jak ten sposóbmożna wykryć jak to
źródło
Wszystkie rozwiązania tak naprawdę u mnie nie działały, zadziałało porównanie elementów
scrollWidth
zscrollWidth
jego rodzica (lub dziecka, w zależności od tego, który element ma wyzwalacz).Kiedy dziecko
scrollWidth
jest wyżej niż jego rodzice, oznacza to, że.text-ellipsis
jest aktywne.Kiedy
event
jest elementem nadrzędnymKiedy
event
jest elementem potomnymźródło
Plik
e.offsetWidth < e.scrollWidth
Rozwiązanie nie zawsze działa.A jeśli chcesz używać czystego JavaScript, polecam użyć tego:
(maszynopis)
źródło
Rozwiązanie @ItaloBorssatto jest idealne. Ale zanim spojrzałem na SO - podjąłem decyzję. Oto jest :)
źródło
Moja realizacja)
źródło
w demie http://jsfiddle.net/brandonzylstra/hjk9mvcy/ jest kilka błędów, o których wspomina https://stackoverflow.com/users/241142/iconoclast .
w swoim demo dodaj ten kod będzie działał:
źródło