CSS 文本超出提示效果

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

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

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

1、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，就能够实现咱们想要的功能了。

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

2、多行文本判断

首先，当文本超出一行时，高度必然会发生变化（😂），假设行高为 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; 
}

是否是有点奇怪了？其实就是往上位移了2行的距离，这样在文本A只有一行的时候，文本B就恰好“出界”了；在文本A有多行的时候，因为高度只有2行的高度，文本B恰好“覆盖”在上面，原理示意以下

这时，若是把父级的高度限制在一行，而且把文本B作单行截断

.wrap{
  line-height: 1.5;
  height: 1.5em;
}
.title{
position: relative;
top: -3em;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}

这样，在多行的时候，视野内看到的就是文本B了，效果以下

最后，把父级超出隐藏，还有文本B背景设置成父级相同的颜色就能够了~

到这里为止，就实现了文章开头所示的效果，完整代码能够查看codepen auto title（记得鼠标放上去o~）

为了更方便直观的演示，这里作了一个相似的列表以下

在线例子可访问codepen auto title list（记得鼠标放上去o~）

3、其余实用案例

下面再介绍两个更加实用的提示效果

1. 中间省略效果

细心的小伙伴可能已经发现，文章开头的文本超出时，省略号是在中间的。

这种设计有什么好处呢？好比有时候不少文件的名称是相同的，只有后缀名不一样，或者不少会有个版本号，举个栗子：

当宽度较小时，末尾出现了省略号，这就很尴尬了，因为前面都是同样的，一眼看上去彻底分不清文件名哪一个跟哪一个（😵）

若是省略号在中间就很好区分了。那么，如何实现这一效果呢？

借助上面的布局，下面全部分析只须要对文本B进行处理就好了。关于中间省略效果，目前尚未专门的 CSS 样式能够实现，不过能够模拟它，接着往下看

首先，复制一份文本，这里使用::before伪类经过content生成

.title::before{
    content: attr(title);
}

很明显，这个时候两段文本是链接在一块儿的

而后，给:before设置右浮动，宽度设置成 50%

.title::before{
    content: attr(title);
    width: 50%;
    float: right;
}

接着，给:before设置超出截断

.title::before{
    /**/
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

最后，把:before换成前面省略号的效果，能够用direction实现，关于direction，平时可能没怎么接触，其实就是改变排版方向的，默认是从左到右，省略号在右侧，若是改为从右到左，那么省略号也会在左边，因此

.title::before{
    /**/
    direction: rtl; /*从右到左*/
}

如今看看完成效果吧

有一点小问题，中间的省略号左边的空隙有时候有点大，以下

这个是由于这个地方恰好换行了，全部空出了一小截。这里能够用文本两端对齐简单优化一下

.title{
    /**/
    text-align: justify;
}

这样就能保证最右端的文字是靠右的（固然文本的间隙会略微增长一点~），效果以下

在线例子可访问codepen auto middle ellipsis（记得鼠标放上去o~）

2. 超出滚动效果

有时候，title 提示可能有点弱，不够明显，产品须要文本超出的时候，鼠标放上去能够自动滚动起来，相似这样的效果

如何实现的呢？其实借助上面的布局，这里实现就很是容易了，只须要对文本B作滚动动画便可，关于CSS3实现无缝滚动，这里介绍一下实现：

要作到首尾无缝滚动，首先须要复制一份相同的文本，这里使用::after伪元素经过content生成

.title::after{
    content: attr(data-title);/*复制一份文本，下图绿色的部分*/
}

如今须要在一行显示，不换行

.title{
    /**/
    white-space: nowrap;
}

能够看到，虽然不换行了，可是宽度仍是父级的宽度，并无跟随文字内容，这时，能够设置display: inline-block

.title{
    /**/
    display: inline-block;
    white-space: nowrap;
}

关于宽度跟随文字内容，其实还能够用 width: max-content实现，兼容性略差

.title{
    /*
    display: inline-block;
    white-space: nowrap;
    */
    width: max-content;
}

接着，设置animation动画便可，只须要当transform位移到自身一半50%时迅速归位，就能达到无缝衔接的效果，以下

.title:hover{
    /**/
    animation: move 10s .3s linear infinite;
}
@keyframes move {
    to {
        transform: translateX(-50%); /*位移到 50% 时 迅速归位*/
    }
}

这里首尾的间隙是用 padding 实现的

.title::after{
    content: attr(data-title);
    padding: 0 5em;/*无缝滚动的首位间隙*/
}

在线例子可访问codepen auto scroll list（记得鼠标放上去o~）

惟一的缺陷是动画时间是固定的，若是文本很长，可能出现滚动过快的问题

4、总结和说明

本文介绍了一种全新 CSS 自动判断多行文本的思路，而且带来3我的性化的小交互。总的来讲，其实也没用到太多的技巧（主要仍是想象力），结构还不算复杂，相信一步步看下来不会有很大的难度。

重点依旧是上面的布局部分，布局出来了，下面不少扩展效果也就迎刃而解了。因为只用到了CSS2相关特性（max-height、文本截断等），兼容性也是棒棒的，实测能够兼容到IE7+（全兼容，放心使用），后面的超出滚动效果兼容到IE10+， 如今总结一下实现重点：

1. 转换思路，节点复制是一个好办法
2. 经过max-height能够判断单行和多行
3. 灵活运用CSS 障眼法层级覆盖和超出隐藏
4. direction：rtl能够实现前置省略号的效果
5. 中间省略号能够用两段文本拼接的方式模拟
6. 宽度跟随文本自适应能够用inline-block实现
7. 无缝滚动效果能够用位移-50%来实现

好了，这样一个成本低廉，又很是人性化的小功能，赶忙用起来吧。若是你们以为不错的话，欢迎点赞、收藏、转发❤❤❤~