2019/07/19 开坑。
单行文字的截断非常简单，但多行文字的截断就很麻烦了，
经常要配合 JavaScript 或者 其他语言进行字符串截断，然后拼接上 “…”
突然发现 line-clamp 它可以完成以纯 CSS 的多行文本截断，
并且配合 text-overflow: ellipsis 就可以在尾部加上省略号，
当然 overflow: hidden 并不可缺少
CSS 中的文字截断
如何理解 Call, Apply, Bind?
今天，介绍这两个方法的区别以及一些妙用，还有用法相似的 bind 的方法。
它们最主要的作用，是改变 this 的指向。在平时的工作中，除了在写一些基础类，或者公用库方法的时候会用到它们，其他时候应用场景并不多（ React 我习惯用箭头函数）。
万能的 :checked + label
Meathill：纯 CSS 组件顾名思义，只改变外观，不改变行为。所以它的功能不会因为浏览器变化而变化，即使浏览器支持不完善，即使因为加载速度或者网络关系，导致 CSS、JS 加载失败，它最多样式回归到原始样式，功能是完全一致的。在非标准浏览器环境下，如读屏器，也是如此
前年看肉大直播的时候听到：万能的 :checked + label 当时没有体会到有啥万能，不就是自定义 input 样式吗，直到前段时间看到一个 Demo 虽然不是使用的这种方法，但是我突然就明白了，这个就可以用 :checked + label 来实现。
…
原来很多需要 Js 配合的一些效果点击效果只需要 :checked + label 就可以完成。
BetterScrol 2.x Mouse-whell 没效果
安装
yarn add @better-scroll/mouse-wheel@next
使用
import BScroll from '@better-scroll/core'
import MouseWheel from '@better-scroll/mouse-wheel'
BScroll.use(MouseWheel)
new BScroll('.bs-wrap', {
//...
mouseWheel: {
speed: 20,
invert: false,
easeTime: 300
}
})但是为什么在原有的基础上这样写没有用呢。官方 Demo
查看 Demo 源码在 scroll-wrapper 外多了一层 core-mouse-wheel 加上就可以了。
😂 没仔细看 Demo 源码
Hexo 主题开发制作
前置
Hexo 的安装就不讲了，直接开始我在制作 Hexo 主题遇到的一些问题。
首先
在使用 Hexo cli 脚手架创建完 Hexo 项目后会有一个默认官方主题 landscape 在 themes 目录中复制一份出来重命名成自己的名称，例如我的就是改成了 yogwang，并且在根目录中的 _config.yml 中修改主题为自己的主题
纯CSS实现瀑布流布局
原理：
column-count: n将元素中的文本分为 n 列break-inside: avoid避免元素内部断行并产生新列- 可以不加，但可能会影响布局效果
Demo:
👉 在 CodePen 中打开