CSS 文本超出提示效果

在 mac 文件管理中有这样一个小细节。

1. 当文件名不超过一行时，完整显示，此时鼠标放上去无任何提示
2. 当文件名超过一行时，出现省略号，此时鼠标放上去提示显示完整文件名

一个很微妙但非常 人性化 的细节（ps. 都能完全看见也就不需要提示了😘）。其实这类效果在 web 中，通过简单的 CSS 也能轻易实现的。下面就来看看吧~

相信大家都知道 title 这个属性，原生的提示就用这个了，可以说从上古世纪就开始支持，下面是 MDN 上关于这个属性的介绍

title 全局属性包含了表示咨询信息文本，和它属于的元素相关。这个信息通常存在，但绝不必要，作为提示信息展示给用户

用法也非常简单

<p class="txt" title="这是absolute">元素会被移出正常文档流，并不为元素预留空间，通过指定元素相对于最近的非 static 定位祖先元素的偏移，来确定元素位置。绝对定位的元素可以设置外边距（margins），且不会与其他边距合并。
</p>
复制代码

这里 title 的表现样式还有停留时间与操作系统和浏览器有关，也不可修改

现在问题来了，title 属性是预先添加的，并且无法通过样式来控制是否显示，那么，CSS 如何做到动态处理呢？

虽然 CSS 无法动态去改变 title 属性，换个思路，假如有两份相同的文本，其中一份是带有 title 属性的，比如

<p class="wrap">
  <span class="txt">元素会被移出正常文档流，并不为元素预留</span>
  <span class="title" title="元素会被移出正常文档流，并不为元素预留">元素会被移出正常文档流，并不为元素预留</span>
</p>
复制代码

为了方便演示，这里给带有 title 属性的文本加上背景色，然后暂且称为 文本 A 和 文本 B 吧（以下适用），如下所示

现在只需要控制在 单行文本 的时候展示 文本 A ，多行文本 的时候展示 文本 B ，就可以实现我们想要的功能了。

那么，如何判断文本是否超出一行呢？

首先，当文本超出一行时，高度必然会发生变化（😂），假设行高为 1.5，那么 1 行文本就是 1.5em，2 行就是 3em，依次类推…