江苏龙网

  1. 主页 > 生活百科 > >

CSS 文本超出提示效果

css

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

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

文章插图
 
一个很微妙但非常人性化的细节（ps.都能完全看见也就不需要提示了） 。其实这类效果在 web 中 ， 通过简单的 css 也能轻易实现的 。下面就来看看吧~
 
一、CSS 实现思路 
相信大家都知道 title 这个属性 ， 原生的提示就用这个了 ， 可以说从上古世纪就开始支持 ， 下面是 MDN 上关于这个属性的介绍
 
title 全局属性 包含了表示咨询信息文本 ， 和它属于的元素相关 。这个信息通常存在 ， 但绝不必要 ， 作为提示信息展示给用户
 
用法也非常简单
 
<pclass="txt" title="这是absolute">元素会被移出正常文档流 ， 并不为元素预留空间 ， 通过指定元素相对于最近的非 static 定位祖先元素的偏移 ， 来确定元素位置 。绝对定位的元素可以设置外边距（margins） ， 且不会与其他边距合并 。</p> 
CSS 文本超出提示效果

文章插图
 
这里 title 的表现样式还有停留时间与操作系统和浏览器有关 ， 也不可修改
 
现在问题来了 ， title 属性是预先添加的 ， 并且无法通过样式来控制是否显示 ， 那么 ， CSS 如何做到动态处理呢？接着往下看
 
虽然 CSS 无法动态去改变 title 属性 ， 换个思路 ， 假如有两份相同的文本 ， 其中一份是带有 title 属性的 ， 比如
【CSS 文本超出提示效果】 
<p class="wrap"><span class="txt">元素会被移出正常文档流 ， 并不为元素预留</span><span class="title" title="元素会被移出正常文档流 ， 并不为元素预留">元素会被移出正常文档流 ， 并不为元素预留</span></p> 
为了方便演示 ， 这里给带有 title 属性的文本加上背景色 ， 然后暂且称为 文本A 和 文本B 吧（以下适用） ， 如下所示
CSS 文本超出提示效果

文章插图
 
现在只需要在单行文本的时候展示 文本A  ， 多行文本的时候展示 文本B ， 就可以实现我们想要的功能了 。
 
那么 ， 如何判断文本是否超出一行呢？
 
二、多行文本判断 
首先 ， 当文本超出一行时 ， 高度必然会发生变化（） ， 假设行高为 1.5 ， 那么1行文本就是 1.5em ， 2行就是 3em ， 依次类推...
 
但是 ， 如果我们限制A的最大高度为两行 ， 那么一行和多行不就区分开了吗（单行高度是1.5em ， 多行高度是3em）
 
.txt{display: block;max-height: 3em;/*最大高度为2行*/} 
现在关键的一步来了 ， 把文本B 往上移动2行的距离 ， 这里用相对定位实现（margin也可以）
 
.title{position: relative;top: -3em; } 
CSS 文本超出提示效果

文章插图
 
是不是有点奇怪了？其实就是往上位移了2行的距离 ， 这样在文本A 只有一行的时候 ， 文本B 就刚好“出界”了；在文本A 有多行的时候 ， 由于高度只有2行的高度 ， 文本B 刚好“覆盖”在上面 ， 原理示意如下
CSS 文本超出提示效果

文章插图
 
这时 ， 如果把父级的高度限制在一行 ， 并且把文本B做单行截断
 
.wrap{line-height: 1.5;height: 1.5em;}.title{position: relative;top: -3em;white-space: nowrap;text-overflow: ellipsis;overflow: hidden;}


推荐阅读


上一篇：牡丹花茶价格表,牡丹花茶的禁忌

下一篇：养生花茶配方功效大全,养生花茶配方