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

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

CSS 中有一个有趣的特性叫 image-rendering，它可以通过算法来像素化被缩放的图片。利用它和 canvas 打配合，可以实现等尺寸马赛克的遮罩效果。

为什么这些个网站UI做的这么漂亮啊？为什么它们的细节这么细啊？交互好、实现棒，很难叫人不收藏啊！！毕竟收藏了，下次都是会来学的🐶