使用省略号隐藏文本溢出时,防止Safari显示工具提示

Question

如何将鼠标悬停在链接中文本的截断部分上时,如何完全删除显示的默认浏览器工具提示？

由于css省略号规则,文本被截断:

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

当我将这些规则应用于固定宽度div时,我得到一个html工具提示.(仅限Safari,不适用于Firefox或Chrome.)

这是一个jsfiddle.

我尝试添加一个JS preventDefault并添加一个空title属性,但这些都不起作用.

Answer 1

我也不被允许使用pointer-events:none，因为它是一个链接。我的灵感来自 user1271033 的回答。这些示例对我不起作用，但在截断的 div 内的文本之前添加一个空的 div 对我有用。

例子：

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

Answer 2

显示带有文本溢出的元素的工具提示的功能是使用没有非空的省略号,这title是WebKit核心的一部分,但默认情况下它处于关闭状态.只有Safari会覆盖它并启用了该行为.没有办法从应用程序代码中关闭它.

作为解决方法,在隐藏了溢出的元素内添加一个空块元素text-overflow: ellipsis.这可以是真实的,如@bas的答案已经显示的,或者通过使用CSS创建一个伪元素:

&::before {
  content: '';
  display: block;
}

(使用SCSS语法).如果您使用Sass并创建一个mixin封装文本溢出与省略号的隐藏,这可以是一个很好的添加,而无需任何额外的HTML标记.