在 mac 文件治理中有这样一个小细节。
- 当文件名不超过一行时，残缺显示，此时鼠标放上去无任何提醒
- 当文件名超过一行时，呈现省略号，此时鼠标放上去提醒显示残缺文件名
一个很奥妙但十分人性化的细节（ps.都能齐全看见也就不须要提醒了）。其实这类成果在 web 中，通过简略的 CSS 也能轻易实现的。上面就来看看吧~
一、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，顺次类推...
然而，如果咱们限度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~）
三、其余实用案例
上面再介绍两个更加实用的提醒成果
- 两头省略成果
仔细的小伙伴可能曾经发现，文章结尾的文本超出时，省略号是在两头的。
这种设计有什么益处呢？比方有时候很多文件的名称是雷同的，只有后缀名不同，或者很多会有个版本号，举个栗子：
当宽度较小时，开端呈现了省略号，这就很难堪了，因为后面都是一样的，一眼看上去齐全分不清文件名哪个跟哪个（）
如果省略号在两头就很好辨别了。那么，如何实现这一成果呢？
借助下面的布局，上面所有剖析只须要对文本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~）
- 超出滚动成果
有时候，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~）
惟一的缺点是动画工夫是固定的，如果文本很长，可能呈现滚动过快的问题
四、总结和阐明
本文介绍了一种全新 CSS 主动判断多行文本的思路，并且带来3个人性化的小交互。总的来说，其实也没用到太多的技巧（次要还是想象力），构造还不算简单，置信一步步看下来不会有很大的难度。
重点仍旧是下面的布局局部，布局进去了，上面很多扩大成果也就迎刃而解了。因为只用到了CSS2相干个性（max-height、文本截断等），兼容性也是棒棒的，实测能够兼容到IE7+（全兼容，放心使用），前面的超出滚动成果兼容到IE10+， 当初总结一下实现重点：
- 转换思路，节点复制是一个好方法
- 通过max-height能够判断单行和多行
- 灵活运用CSS 障眼法层级笼罩和超出暗藏
- direction：rtl能够实现前置省略号的成果
- 两头省略号能够用两段文本拼接的形式模仿
- 宽度追随文本自适应能够用inline-block实现
- 无缝滚动成果能够用位移-50%来实现
好了，这样一个老本低廉，又十分人性化的小性能，连忙用起来吧。如果大家感觉不错的话，欢送点赞、珍藏、转发❤❤❤~