单行文字的截断非常简单，但多行文字的截断就很麻烦了，
经常要配合 JavaScript 或者 其他语言进行字符串截断，然后拼接上 “…”

突然发现 line-clamp 它可以完成以纯 CSS 的多行文本截断，
并且配合 text-overflow: ellipsis 就可以在尾部加上省略号，
当然 overflow: hidden 并不可缺少

前景：

很多情况下，都需要做到这样的一个输入框效果：

很久以前都是使用 :valid 来实现效果 DEMO 01 -> CodePen

Meathill：纯 CSS 组件顾名思义，只改变外观，不改变行为。所以它的功能不会因为浏览器变化而变化，即使浏览器支持不完善，即使因为加载速度或者网络关系，导致 CSS、JS 加载失败，它最多样式回归到原始样式，功能是完全一致的。在非标准浏览器环境下，如读屏器，也是如此

前年看肉大直播的时候听到：万能的 :checked + label 当时没有体会到有啥万能，不就是自定义 input 样式吗，直到前段时间看到一个 Demo 虽然不是使用的这种方法，但是我突然就明白了，这个就可以用 :checked + label 来实现。

…

原来很多需要 Js 配合的一些效果点击效果只需要 :checked + label 就可以完成。

原理：

1. column-count: n 将元素中的文本分为 n 列
2. break-inside: avoid 避免元素内部断行并产生新列
   • 可以不加，但可能会影响布局效果

Demo:

👉 在 CodePen 中打开

问题

在 Chrome 中，使用 transform 或者 flex 垂直居中内容块，当视窗滚动到容器一半时再经过第一个内容块（之后的都正常），整个容器块都会被移动

• 内容块高度已经大于文本块高度
• 内容块垂直居中
• 视窗滚动到容器一半时
• 改变文本块高度
• Firefox 同样遇到该问题
• Edge 正常
• IE11 正常