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

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

一个很奥妙但十分 人性化 的细节（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~）

三、其余实用案例

上面再介绍两个更加实用的提醒成果

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~）

惟一的缺点是动画工夫是固定的，如果文本很长，可能呈现滚动过快的问题

四、总结和阐明

本文介绍了一种全新 CSS 主动判断多行文本的思路，并且带来 3 个人性化的小交互。总的来说，其实也没用到太多的技巧（次要还是想象力），构造还不算简单，置信一步步看下来不会有很大的难度。

重点仍旧是下面的 布局 局部，布局进去了，上面很多扩大成果也就迎刃而解了。因为只用到了 CSS2 相干个性（max-height、文本截断等），兼容性也是棒棒的，实测能够兼容到IE7+（全兼容，放心使用），前面的超出滚动成果兼容到IE10+，当初总结一下实现重点：

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

好了，这样一个老本低廉，又十分人性化的小性能，连忙用起来吧。如果大家感觉不错的话，欢送点赞、珍藏、转发❤❤❤~