CSS 文本超出提示效果( 二 ) _CSS

这样，在多行的时候，视野内看到的就是文本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; /*从右到左*/}