搜索页中历史搜索，类似淘宝超过2行折叠展示

Question

是怎么判断已经超过2行，后面显示展示小图标的？？
有做过类似的吗？？

Answer 1

一般是根据最大高度判断的，收起设置max-height: 两行的高度，展开设置一个较大的值

.hide{
max-height: 60px; // 假设每行是30px
overflow: hidden;
transition: height .25s;
}
.show{
max-height: 999px; // 一个足够大的高度
}

Answer 2

从逻辑上来看，使用纯粹的css 大概无法判断是否显示 展开，因为css 里并没有根据子元素的一条条件来改变父元素的状态。
我觉得你可以动态的去计算在没有展开按钮的时候高度是否已经高于2行，然后通过js 动态的添加 展开按钮，淘宝的展开按钮的计算也是有延迟的，他们估计也是通过2部完成的。