Mam zakres z dynamicznymi danymi na mojej stronie, ze ellipsis
stylem.
.my-class
{
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
width: 71px;
}
<span id="myId" class="my-class"></span>
document.getElementById('myId').innerText = "...";
Chciałbym dodać do tego elementu etykietę narzędzia o tej samej treści, ale chcę, aby pojawiała się tylko wtedy, gdy zawartość jest długa, a na ekranie pojawia się wielokropek.
Czy jest na to jakiś sposób?
Czy przeglądarka generuje zdarzenie, gdy ellipsis
jest aktywowane?
* Przeglądarka: Internet Explorer
text-overflow:ellipsis;
ogóle nie działa w Firefoksie - zobacz to pytanie, aby uzyskać więcej informacji: stackoverflow.com/questions/4927257/…element.offsetWidth < element.scrollWidth
zgodnie z tą odpowiedzią wydaje się do tej pory działać.text-overflow:ellipsis;
teraz działa w przeglądarce Firefox; został dodany w Firefox 7 (wydany we wrześniu 2011 r.).Odpowiedzi:
Oto sposób, w jaki robi to za pomocą wbudowanego ustawienia wielokropka i dodaje
title
atrybut na żądanie (z jQuery) w oparciu o komentarz Martina Smitha:źródło
"As of jQuery 1.7, the .on() method is the preferred method for attaching event handlers to a document"
Aby uzyskać więcej informacji, patrz api.jquery.com/bind i api.jquery.com/onOto czyste rozwiązanie CSS. Nie potrzebujesz jQuery. Nie będzie wyświetlać podpowiedzi, zamiast tego powiększy zawartość do pełnej długości po najechaniu myszką.
Działa świetnie, jeśli masz treści, które zostaną zastąpione. Nie musisz wtedy uruchamiać funkcji jQuery za każdym razem.
źródło
Odpowiedź uosɐſ jest zasadniczo poprawna, ale prawdopodobnie nie chcesz tego robić w przypadku zdarzenia w centrum myszy. Spowoduje to, że wykona obliczenia, aby określić, czy jest ono potrzebne, za każdym razem, gdy najedziesz myszką na element. O ile rozmiar elementu się nie zmieni, nie ma powodu, aby to robić.
Lepiej byłoby po prostu wywołać ten kod natychmiast po dodaniu elementu do DOM:
Lub, jeśli nie wiesz, kiedy dokładnie został dodany, wywołaj ten kod po zakończeniu ładowania strony.
jeśli masz więcej niż jeden element, z którym musisz to zrobić, możesz nadać im tę samą klasę (np. „mayOverflow”) i użyć tego kodu, aby zaktualizować je wszystkie:
źródło
$(".mightOverflow").each(function() { if( $(this).offsetWidth < $(this).scrollWidth && !$(this).attr('title')){ $(this).attr('title', $(this).text()); $(this).css('border-bottom', '1px dotted #A8A8A8'); } });
this.offsetWidth < this.scrollWidth
i być może nawet sprawdzenie!$this.attr('title')
zostanie wykonane za każdym razem, gdy najedziesz myszką na element.Oto dwa inne rozwiązania oparte wyłącznie na CSS:
źródło
Oto moja wtyczka jQuery:
Stosowanie:
Edytować:
Zrobiłem sedno dla tej wtyczki. https://gist.github.com/UziTech/d45102cdffb1039d4415
źródło
Musimy wykryć, czy elipsa jest rzeczywiście zastosowana, a następnie pokazać etykietkę narzędzia, aby odsłonić pełny tekst. Nie wystarczy tylko porównywać „
this.offsetWidth < this.scrollWidth
”, gdy element prawie trzyma zawartość, ale brakuje tylko jednego lub dwóch dodatkowych pikseli szerokości, szczególnie dla tekstu chińskich / japońskich / koreańskich znaków o pełnej szerokości.Oto przykład: http://jsfiddle.net/28r5D/5/
Znalazłem sposób, aby poprawić wykrywanie elipsy:
this.offsetWidth < this.scrollWidth
Najpierw porównaj „ ”, kontynuuj krok 2, jeśli się nie powiedzie.Oto moje ulepszenie: http://jsfiddle.net/28r5D/6/
źródło
Stworzyłem wtyczkę jQuery, która używa podpowiedzi Bootstrap zamiast podpowiedzi przeglądarki. Pamiętaj, że nie zostało to przetestowane ze starszą przeglądarką.
JSFiddle: https://jsfiddle.net/0bhsoavy/4/
źródło
Oto co zrobiłem. Większość skryptów podpowiedzi wymaga wykonania funkcji przechowującej podpowiedzi. To jest przykład jQuery:
Jeśli nie chcesz sprawdzać ellipsis css, możesz uprościć:
Mam wokół niego „kiedy”, więc funkcja „setupTooltip” nie działa, dopóki wszystkie tytuły nie zostaną zaktualizowane. Zamień „setupTooltip” na funkcję podpowiedzi, a * na elementy, które chcesz sprawdzić. * przejdzie je wszystkie, jeśli go opuścisz.
Jeśli chcesz po prostu zaktualizować atrybuty tytułu za pomocą podpowiedzi przeglądarki, możesz uprościć:
Lub bez sprawdzania elipsy:
źródło
Jeśli chcesz to zrobić wyłącznie przy użyciu javascript, zrobiłbym następujące. Nadaj zakresowi atrybut id (aby można go było łatwo pobrać z DOM) i umieść całą zawartość w atrybucie o nazwie „content”:
Następnie w javascript możesz wykonać następujące czynności po wstawieniu elementu do DOM.
Oczywiście, jeśli używasz javascript do wstawiania zakresu do DOM, możesz po prostu zachować zawartość w zmiennej przed wstawieniem. W ten sposób nie potrzebujesz atrybutu treści w zakresie.
Są bardziej eleganckie rozwiązania, jeśli chcesz używać jQuery.
źródło
$("#myDataId").attr("title", function() { var innerText = $(this).text(); var content = $(this).attr("content"); if (innerText.length <= content.length) { return content; } return null; });
Mam klasę CSS, która określa, gdzie umieścić elipsę. Na tej podstawie robię następujące (zestaw elementów może być inny, piszę te, w których używana jest elipsa, oczywiście może to być osobny selektor klasy):
źródło
this
byłanchor
więc, więc użyłemthis.text()
zamiastval()
Oto rozwiązanie Vanilla JavaScript:
źródło
To było moje rozwiązanie, działa jak urok!
źródło
Żadne z powyższych rozwiązań nie działało dla mnie, ale wymyśliłem świetne rozwiązanie. Największym błędem, jaki popełniają ludzie, jest zadeklarowanie wszystkich 3 właściwości CSS w elemencie podczas ładowania strony. Musisz dodać te style + etykietkę dynamicznie JEŻELI i TYLKO JEŚLI zakres, na którym chcesz elips, jest szerszy niż jego element nadrzędny.
źródło
Możesz ewentualnie otoczyć przęsło innym przęsłem, a następnie po prostu sprawdź, czy szerokość pierwotnego / wewnętrznego przęsła jest większa niż szerokość nowego / zewnętrznego przęsła. Zauważ, że mówię, że możliwe - jest to mniej więcej oparte na mojej sytuacji, w której miałem
span
wnętrze,td
więc nie wiem, czy to będzie działać zspan
wnętrzemspan
.Oto mój kod dla innych, którzy mogą znaleźć się w pozycji podobnej do mojej; Kopiuję / wklejam go bez modyfikacji, nawet jeśli jest to w kontekście Angular, nie sądzę, że szkodzi to czytelności i podstawowej koncepcji. Zakodowałem to jako metodę usługi, ponieważ musiałem zastosować go w więcej niż jednym miejscu. Selektor, który przekazałem, był selektorem klasy, który będzie pasował do wielu instancji.
źródło