✂ 酷库 - 控制文本行数

SLYLXDYMJ

字数：253 字

时长：1 分钟

这个功能每次写起来都很蛋疼（这里指多行的情况）
原因很简单，-webkit-line-clamp 这个属性没有被 css 作为标准属性使用，
每次用就感觉比较别扭，并且根据情况的不同，就算用了 -webkit-line-clamp 也不一定能完美实现

纯 CSS 实现

最简单的方式，IE 不兼容，其他主流游览器都 OK
PS：但是问题是，在省略号后面不能跟东西，通常需求是展开/折叠按钮等

<div class="any">
  假设这里有很多的内容
</div>

/* 内心OS：这都是些个什么玩意... */
.any {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

clamp-js

无依赖

vue-line-clamp

vue组件，用起来没问题，但是展开/折叠逻辑需要自行实现，有点麻烦

vue-line-clamp-q

我基于 vue-line-clamp 的基础上做了优化
将折叠逻辑整合到了内部，使其使用起来更加简单