CSS省略号防止safari中的工具提示 [英] CSS Ellipsis prevent tooltip in safari

问题描述

如何将鼠标悬停在链接中截断的文本部分上时，如何完全删除显示的默认浏览器工具提示？
由于css省略号规则，文本被截断：

  text-overflow：ellipsis; white-space：nowrap; overflow：hidden; 
  

当我将这些规则应用到固定宽度div时，我得到一个html工具提示。 （不在firefox或chrome，但在safari）

这里是 a jsfiddle

我尝试添加一个js防止默认值，并添加一个空标题属性，但都不起作用

$ b $我也不是allwed使用指针事件：无，因为它是一个链接。我的灵感来自user1271033的答案。

示例：

$

b $ b

 < div style =text-overflow：ellipsis; white-space：nowrap; overflow：hidden; width：50px;> 
< div>< / div> 
测试测试
< / div> 
  

How can I completely remove the default browser tooltip displayed when hovering over a truncated part of text in a link? Text is truncated because of a css ellipsis rule :

text-overflow: ellipsis;white-space: nowrap; overflow: hidden;

When I apply these rules to a fixed width div, I get a html tooltip. (not in firefox or chrome, but in safari)

here is a jsfiddle

I tried adding a js prevent default and adding an empty title attribute, but none of these work

解决方案

I was also not allwed to use pointer-events:none, because it is a link. I was inspired by the answer of user1271033. The examples did not work for me, but adding an empty div before the text inside the truncated div worked for me.

Example:

    <div style="text-overflow: ellipsis;white-space: nowrap; overflow: hidden;width:50px;">
         <div></div>
         Test test test
    </div>

这篇关于CSS省略号防止safari中的工具提示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！