How can I detect a click on ellipsis (…) in browser?

Question

It seems to be hopeless, because the ellipsis is not in the DOM, it's just a render trick by the browser

I am asking because I am not a html/css guru, so many ezoteric tricks may exist I am not aware...

Answer 1

This will be a little tricky...It looks like you are using .ellipsis class on ellipsis text...

...so try to append a span on every .ellipsis class element using each jQuery. Use position to align that span at end of text

...and then add a click event to that span

^{Note: I added a background color to that span just for visual}

Stack Snippet

 $(".ellipsis").each(function() { $(this).append("<span class='dots'></span>") }) $(document).on("click", ".dots", function() { console.log("ellipsis element is clicked"); }) 

 p { width: 150px; border: 1px solid; font: 13px Verdana; } .ellipsis { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; position: relative; } span.dots { position: absolute; right: 0; top: 0; bottom: 0; width: 12px; background: #ff000052; z-index: 99; cursor:pointer; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <p class="ellipsis">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> <p class="">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> <p class="ellipsis">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> <p class="">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> 

Answer 2

You cannot attach events to pseudo-content, and text overflow characters are pseudo-content, in the same way content rendered by ::before and ::after is pseudo-content.

And like all pseudo-content, any clicks to it will trigger an event on the element to which it belongs.

Answer 3

也许将事件侦听器添加到窗口中，然后检查鼠标单击是否具有与椭圆相同的x和y坐标？