使用省略号隐藏文本溢出时，防止Safari显示工具提示 [英] Prevent Safari from showing tooltip when text overflow is hidden with ellipsis

问题描述

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

How can I completely remove the default browser tooltip displayed when hovering over a truncated part of text in a link?

由于css省略号规则，文本会被截断：

Text is truncated because of a css ellipsis rule :

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

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

When I apply these rules to a fixed width div, I get a html tooltip. (Only in Safari, not in Firefox or Chrome.)

这是 jsfiddle 。

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

I tried adding a JS preventDefault and adding an empty title attribute, but none of these work.

推荐答案

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

The ability to show tooltips for elements with text overflow cut off with ellipsis that don't have a non-empty title is part of WebKit core, but it's turned off by default. Only Safari overrides that and has the behavior enabled. There's no way to turn that off from your application code.

作为一种解决方法，在元素内添加一个空块元素，该元素具有<$ c隐藏的溢出$ c> text-overflow：省略号。这可以是真实的，如@bas的答案已经显示的那样，或者通过用CSS创建一个伪元素：

As a work-around, add an empty block element inside the element that has the overflow hidden with text-overflow: ellipsis. This can be done either for real, as @bas's answer already shows, or by creating a pseudo-element with CSS:

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

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

(using SCSS syntax). If you use Sass and create a mixin encapsulating the hiding of text overflow with ellipsis, this can be a nice addition without the need for any extra HTML mark-up.

这篇关于使用省略号隐藏文本溢出时，防止Safari显示工具提示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！