如何在浏览器中检测到省略号（...）？

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坐标？