如何在瀏覽器中檢測到省略號（...）？

Question

似乎沒有希望，因為省略號不在DOM中，它只是瀏覽器的渲染技巧

我要問的是因為我不是html / css專家，所以我不知道可能存在許多簡單的技巧...

Answer 1

這將有些棘手...看起來您在省略號文本上使用.ellipsis類...

...因此，嘗試使用each jQuery在每個.ellipsis類元素上附加一個span 。 使用position在文本末尾對齊該span

...然后將點擊事件添加到該span

^{注意：我為該span添加了背景色，只是為了視覺}

堆棧片段

 $(".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

您不能將事件附加到偽內容上，並且文本溢出字符是偽內容，就像通過::before和::after呈現的內容是偽內容一樣。

與所有偽內容一樣，對其的任何單擊都會在它所屬的元素上觸發一個事件。

Answer 3

也許將事件偵聽器添加到窗口中，然后檢查鼠標單擊是否具有與橢圓相同的x和y坐標？