safari出现未设置title属性却显示ttile弹窗的问题
GzhiYi · 2020-07-06
前端

在safari浏览器下,出现dom未设置title属性,但hover过去会显示一个title的问题。如图:

Xnip2020-07-06_14-08-29

一开始一直往title属性上找问题,但dom的属性结构光溜溜的,并没有任何title有关的属性。这个问题在chrome和firefox都没有,只有在safari上出现。

问题所在

经过一顿排查,发现是css设置为文本超出省略显示后才会有这个问题。

我们常用到文本超出省略的设置,如:

.text-ellipsis {
    overflow: hidden;
  text-overflow: ellipsis;
  word-break: keep-all;
  white-space: nowrap;
}

解决办法

text-ellipsis包裹的元素中添加一个空的block元素。如:

<div class="text-ellipsis ...">
    <span></span>
    this is a long text!!!!!!!!
<div>
<style>
.text-ellipsis {
    overflow: hidden;
    text-overflow: ellipsis;
    word-break;
    white-space: nowrap;
}
.text-ellipsis span {
    display: block;
}
</style>
如果你对这页内容有疑问,欢迎联系我!
邮箱
GitHub
统计访问量