javascript - 当用省略号隐藏文本溢出时阻止 Safari 显示工具提示

Question

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

由于 css 省略号规则，文本被 chop :

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

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

这里是 a jsfiddle .

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

Answer 1

为没有非空 title 的文本溢出被省略号 chop 的元素显示工具提示的能力是 WebKit 核心的一部分，但默认情况下它是关闭的。只有 Safari 会覆盖它并启用该行为。无法从您的应用程序代码中关闭它。

作为变通方法，在元素内添加一个空 block 元素，该元素用 text-overflow: ellipsis 隐藏了溢出。这既可以真实地完成，正如@bas 的答案已经显示的那样，也可以通过使用 CSS 创建伪元素来完成:

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

(使用 SCSS 语法)。如果您使用 Sass 并创建一个 mixin 来封装隐藏带有省略号的文本溢出，这可能是一个很好的添加，而不需要任何额外的 HTML 标记。