html - 以特定宽度显示鼠标悬停文本

Question

我得到一个 <a>标签，里面有文字。
在手机屏幕上，文本太长，所以我将其隐藏在一定的宽度。
当它隐藏时，我想改为激活鼠标悬停文本。
我用 <a title="..."> 试过了但是当屏幕足够宽以容纳常规文本时，鼠标悬停文本仍然可见。

如何在特定屏幕宽度处禁用鼠标悬停文本？
或者:有没有更好的替代方法来让鼠标悬停文本隐藏在一定宽度？

@media (max-width: 700px) {
  #changePw {
    font-size: 0;
  }
  .fa {
    font-size: initial;
  }
}

<a id="changePw" href="#" title="Change Password">
  <i class="fa">Icon</i> Change Password
</a>

Answer 1

好的，所以我想我会做的是使用伪类:

@media (max-width: 700px) {
  #changePw {
    font-size: 0;
  }
  #changePw:hover:after  {
    content: "Change Password";
    padding: 4px 8px;
    background-color: #333;
    color: #fff;
    font-size: 10pt;
    text-decoration: none;
    display: block;
    width: 5em;
  }
  .fa {
    font-size: initial;
  }
}

<a id="changePw" href="#">
  <i class="fa">Icon</i> Change Password
</a>

(不要忘记在宽度小于 700px 的窗口中进行测试)