共计 4038 个字符，预计需要花费 11 分钟才能阅读完成。
在 mac 文件治理中有这样一个小细节。
当文件名不超过一行时，残缺显示，此时鼠标放上去无任何提醒
当文件名超过一行时，呈现省略号，此时鼠标放上去提醒显示残缺文件名
图片
img
一个很奥妙但十分 人性化 的细节（ps. 都能齐全看见也就不须要提醒了😘）。其实这类成果在 web 中，通过简略的 CSS 也能轻易实现的。上面就来看看吧~
一、CSS 实现思路
置信大家都晓得 title 这个属性，原生的提醒就用这个了，能够说从上古世纪就开始反对，上面是 MDN[1]上对于这个属性的介绍
title 全局属性 [2] 蕴含了示意征询信息文本，和它属于的元素相干。这个信息通常存在，但绝不必要，作为提示信息展现给用户
用法也非常简单
<p class=”txt” title=” 这是 absolute”> 元素会被移出失常文档流，并不为元素预留空间，通过指定元素绝对于最近的非 static 定位先人元素的偏移，来确定元素地位。相对定位的元素能够设置外边距（margins），且不会与其余边距合并。
</p>
图片
img
这里 title 的体现款式还有停留时间与操作系统和浏览器无关，也不可批改
当初问题来了，title 属性是事后增加的，并且无奈通过款式来管制是否显示，那么，CSS 如何做到动静解决呢？
尽管 CSS 无奈动静去扭转 title 属性，换个思路，如果有两份雷同的文本，其中一份是带有 title 属性的，比方
<p class=”wrap”>
<span class=”txt”> 元素会被移出失常文档流，并不为元素预留 </span>
<span class=”title” title=” 元素会被移出失常文档流，并不为元素预留 ”> 元素会被移出失常文档流，并不为元素预留 </span>
</p>
为了不便演示，这里给带有 title 属性的文本加上背景色，而后暂且称为 文本 A 和 文本 B 吧（以下实用），如下所示
图片
img
当初只须要管制在 单行文本 的时候展现 文本 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;
}
图片
img
是不是有点奇怪了？其实就是 往上位移了 2 行的间隔，这样在 文本 A 只有一行的时候，文本 B 就刚好“出界”了；在 文本 A 有多行的时候，文本 B 刚好“笼罩”在下面，原理示意如下
图片
img
这时，如果把父级的高度限制在一行，并且把文本 B 做单行截断
.wrap{
line-height: 1.5;
height: 1.5em;}
.title{
position: relative;
top: -3em;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;}
这样，在多行的时候，视线内看到的就是 文本 B 了，成果如下
图片
img
最初，把父级超出暗藏，还有 文本 B 背景设置成父级雷同的色彩就能够了~
图片
img
到这里为止，就实现了文章结尾所示的成果，残缺代码能够查看 codepen auto title[3]（记得鼠标放上去 o~）
为了更不便直观的演示，这里做了一个相似的列表如下
图片
img
在线例子可拜访 codepen auto title list[4]（记得鼠标放上去 o~）
三、其余实用案例
上面再介绍两个更加实用的提醒成果
- 两头省略成果
仔细的小伙伴可能曾经发现，文章结尾的文本超出时，省略号是在 两头 的。
这种设计有什么益处呢？比方有时候很多文件的名称是雷同的，只有后缀名不同，或者很多会有个版本号，举个栗子：
图片
img
当宽度较小时，开端呈现了省略号，这就很难堪了，因为后面都是一样的，一眼看上去齐全分不清文件名哪个跟哪个（😵）
图片
img
如果省略号在两头就很好辨别了。那么，如何实现这一成果呢？
借助下面的布局，上面所有剖析只须要对文本 B 进行解决就行了。对于两头省略成果，目前还没有专门的 CSS 款式能够实现，不过能够模仿它，接着往下看
首先，复制一份文本，这里应用 ::before 伪元素通过 content 生成
.title::before{
content: attr(title);}
很显著，这个时候两段文本是连贯在一起的
图片
img
而后，给 :before 设置右浮动，宽度设置成 50%
.title::before{
content: attr(title);
width: 50%;
float: right;}
图片
img
接着，给 :before 设置超出截断
.title::before{
/**/
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;}
图片
img
最初，把 :before 换成后面省略号的成果，能够用 direction 实现，对于 direction[5]，平时可能没怎么接触，其实就是扭转排版方向的，默认是从左到右，省略号在右侧，如果改成从右到左，那么省略号也会在右边，所以
.title::before{
/**/
direction: rtl; /* 从右到左 */}
图片
img
当初看看实现成果吧
图片
img
还有一点小问题，两头的省略号右边的空隙有时候有点大，如下
图片
img
这个是因为这个中央刚好换行了，所有空出了一小截。这里能够用文本两端对齐简略优化一下
.title{
/**/
text-align: justify;}
这样就能保障最右端的文字是靠右的（当然文本的间隙会稍微减少一点~），成果如下
图片
img
在线例子可拜访 codepen auto middle ellipsis[6]（记得鼠标放上去 o~）
- 超出滚动成果
有时候，title 提醒 可能有点弱，不够显著，产品须要文本超出的时候，鼠标放上去能够主动滚动起来，相似这样的成果
图片
img
如何实现的呢？其实借助下面的布局，这里实现就非常容易了，只须要对 文本 B 做滚动动画即可，对于 CSS3 实现无缝滚动，这里介绍一下实现：
要做到首尾无缝滚动，首先须要复制一份雷同的文本，这里应用 ::after 伪元素通过 content 生成
.title::after{
content: attr(data-title);/* 复制一份文本，下图绿色的局部 */}
图片
image.png
当初须要在一行显示，不换行
.title{
/**/
white-space: nowrap;}
图片
img
能够看到，尽管不换行了，然而宽度还是父级的宽度，并没有追随文字内容，这时，能够设置 display: inline-block
.title{
/**/
display: inline-block;
white-space: nowrap;}
图片
img
这样宽度就追随文本内容了~
对于宽度追随文字内容，其实还能够用 width: max-content[7] 实现，兼容性略差
.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% 时 迅速归位 */
}}
图片
img
这里首尾的间隙是用 padding 实现的
.title::after{
content: attr(data-title);
padding: 0 5em;/* 无缝滚动的首位间隙 */}
在线例子可拜访 codepen auto scroll list[8]（记得鼠标放上去 o~）
惟一的缺点是动画工夫是固定的，如果文本很长，可能呈现滚动过快的问题
四、总结和阐明
本文介绍了一种全新 CSS 主动判断多行文本的思路，并且带来 3 个人性化的小交互。总的来说，其实也没用到太多的技巧（次要还是想象力），构造还不算简单，置信一步步看下来不会有很大的难度。
重点仍旧是下面的 布局 局部，布局进去了，上面很多扩大成果也就迎刃而解了。因为只用到了 CSS2 相干个性（max-height、文本截断等），兼容性也是棒棒的，实测能够兼容到 IE7+（全兼容，放心使用），前面的超出滚动成果兼容到 IE10+，当初总结一下实现重点：
转换思路，节点复制是一个好方法
通过 max-height 能够判断单行和多行
灵活运用 CSS 障眼法 层级笼罩和超出暗藏
direction：rtl 能够实现前置省略号的成果
两头省略号能够用两段文本 拼接 的形式模仿
宽度追随文本自适应能够用 inline-block 实现
无缝滚动成果能够用位移 -50% 来实现
好了，这样一个老本低廉，又十分人性化的小性能，连忙用起来吧。如果大家感觉不错的话，欢送点赞、珍藏、转发❤❤❤~
参考资料
[1]
https://developer.mozilla.org…
[2]
https://developer.mozilla.org…
[3]
https://codepen.io/xboxyan/pe…
[4]
https://codepen.io/xboxyan/pe…
[5]
https://www.zhangxinxu.com/wo…
[6]
https://codepen.io/xboxyan/pe…
[7]
https://www.zhangxinxu.com/wo…
[8]
https://codepen.io/xboxyan/pe…
