介绍一个CSS检测文本溢出的小技巧。 一直以来，CSS 都无法很好的检测出一段文本是否溢出。但这又是一个非常普遍的需求，比如多行文本展开，展开按钮只有在文本溢出的时候才出现 由于无法直接CSS判断，这

最近在群里，有个小伙伴问了这么一道很有趣的问题： CSS 能否实现，容器再某个高度下是某种表现，一旦超出某个高度，则额外展示另外一些内容 为了简化实际效果，我们看这么一张示意效果图： 可以看到，当容器

z-index 看上去其实很简单，根据 z-index 的高低决定层叠的优先级，实则深入进去，会发现内有乾坤。 看看下面这题，定义两个 div A 和 B，被包括在同一个父 div 标签下。HTML结

背景 最近在项目中要实现一个拖拽头像的移动效果，一直对JS Dom拖拽这一块不太熟悉，甚至在网上找一个示例，都看得云里雾里的，发现遇到最大的拦路虎就是JS Dom各种各样的距离，让人头晕眼花，看到一个

在一个风和日丽的早晨，我正悠闲地喝着Coffe，突然领导向我走来，我赶紧熟练地切出VSCode，淡定自若地问：领导，什么事？领导拍了拍我的肩膀：你上次封装的方法同事跟我反馈使用起来很不错啊，你不如做成

多行文本展开收起是一个很常见的交互， 如下图演示 实现这一类布局和交互难点主要有以下几点 位于多行文本右下角的“展开收起”按钮 “展开”和“收起”两种状态的切换 当文本不超过指定行数时，不显示“展开收

最近在项目中需要做到类似于 **Mac** 下这种，当屏幕宽度足以容下当前文件名称的时候，文件名称全部展示，不做省略。然而当用户缩放浏览器显示的尺寸时，我们需要做到省略中间的文字，选择保留后缀这种方案

在业务中，有这么一种场景，表格下的某一列 ID 值，文本超长了，正常而言会是这样： 通常，这种情况都需要超长省略溢出打点，那么，就会变成这样： 但是，这种展示有个缺点，3 个 ID 看上去就完全一致了

最近，在 CodePen 上，看到一个非常有意思的图片动效，效果如下： 原效果链接：CodePen Demo - 1 div pure CSS blinds staggered animation i