如何实现超过指定行隐藏并显示展开全部

Question

想要实现下图中的效果：

有多个标签，每个标签的长度不一样，它们自由排开，当排列超过两行时，自动隐藏剩下的，这个时候还要显示展开按钮。

我知道如何超过两行隐藏剩下的，但是要怎么判断这些标签有没有超过两行呢？

某一行可能会因为剩下的位置不够下一个标签填充而空出大量位置，总之这种自由排列不好通过字数去判断排列行数，寻求一些建议！

Answer 1

如果每行高度可控的话，我的想法是通过判断2行的高度来确定是否显示展开按钮。
思路就是
1、设置父元素高度为2行的高度，子元素超出的部分用overflow:hidden来隐藏。
2、通过判断子元素的高度是否大于两行的高度来控制是否显示展开按钮。
在线demo

Answer 2

想到一个比较蠢点的做法，循环去掉最后一个标签，直到父元素高度小于指定高度

Answer 3

首先，标签的选择不应该是随机的，而是选的比较多的，所以这里并不太需要你去凑对齐。

其次，这里必须从产品运营角度上诱导用户选择2~4个字的标签，不然用户随便输入个几十个字的一样要挂。

在此基础上，你就只需要显示两行标签，然后控制 overflow:hidden 显示剩下的即可。