CSS 文本超出提示效果

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

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

一个很微妙但非常人性化的细节(ps. 都能完全看见也就不需要提示了 )。其实这类效果在 web 中,通过简单的 CSS 也能轻易实现的。下面就来看看吧~<br/> 一、CSS 实现思路

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

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

用法也非常简单

Plain Text复制代码

1

2

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

</p>

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

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

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

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注