Question

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

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

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

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

这是a jsfiddle。

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

Answer 1

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

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

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

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

Answer 2

我也没有被使用When (/^I click on "(.*?)"$/, (text) => { ... });，因为它是一个链接。我受到了user1271033答案的启发。这些示例对我不起作用，但在截断div中的文本之前添加一个空div对我有效。

示例：

pointer-events:none

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

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

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>

有一个looke

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

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

5 个答案: