防止 Safari 浏览器在文本溢出用省略号隐藏时显示工具提示

Question

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

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

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

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

这是一个jsfiddle。

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

Answer 1

为文本

溢出被省title略号截断的元素显示工具提示的功能是 WebKit 核心的一部分，但默认情况下处于关闭状态。只有 Safari 会覆盖该行为并启用该行为。无法从应用程序代码中关闭它。

作为解决方法，在元素

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

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

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

Answer 2

我也不打算使用pointer-events:none，因为它是一个链接。我的灵感来自用户1271033的答案。这些示例对我不起作用，但是在截断的div 中的文本之前添加一个空的div 对我有用。

例：

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

Answer 3

这个 http://schoonc.blogspot.ru/2014/11/safari-text-overflow-ellipsis.html 怎么样？也许它会适合你。例子：

<div class="text-container">longlonglonglongname</div>
.text-container {
    overflow: hidden;
    text-overflow: ellipsis;
    ...
    &:before {
        content: '';
        display: block;
    }
<div class="text-container" data-name="longlonglonglongname"></div>
 .text-container {
     overflow: hidden;
     text-overflow: ellipsis;
     ...
     &:before {
         content: attr(data-name);
     }

Answer 4

您可以在 CSS 中通过设置指针事件来禁用工具提示：none。但请注意，这会禁用所有指针事件，因此如果它是一个链接，则该链接也将禁用。

Answer 5

在代码中添加 css

 pointer-events: none;

甚至您可以为其创建新的 css 并在需要时应用。

你可以这样做：

<div id="fix" title=""><a href="http://www.google.com"><span style="pointer-events:none;">Lorem ipsum dolor sit amet</span></a></div>

看一看

https://jsfiddle.net/poojagayake/tx06vq09/1/