How to hide more than a specified row and show expand all

want to achieve the effect in the following figure:

there are multiple tags, each of which is of different length, and they are arranged freely. When more than two lines are arranged, the rest are automatically hidden, and the expand button is displayed at this time.

I know how to hide the rest more than two lines, but how can I tell if these tags have more than two lines?

A line may leave a lot of space because there is not enough space left for the next label to fill. In short, this free arrangement is not good to judge the number of lines by the number of words, and ask for some suggestions!

Front-end javascript css3 css

Mar.21,2021

if the height of each row is controllable, my idea is to determine whether the expand button is displayed by judging the height of two rows. The idea of
is
1, set the height of the parent element to the height of 2 rows, and hide the excess of the child element with overflow:hidden.
2. Control whether the expand button is displayed by determining whether the height of the child element is greater than the height of two rows.
online demo

think of a stupid way to loop out the last tag until the height of the parent element is less than the specified height

first of all, the selection of tags should not be random, but more, so there is not much need for you to align.

secondly, users must be induced to choose a label of 2 words from the point of view of product operation, otherwise users will have to hang up if they enter dozens of words at random.

on this basis, you only need to display two lines of tags, and then control overflow:hidden to display the rest.

Previous: How to use CSS to make a width-adaptive table?

Next: Webpack npm run build packing error, did not find the reason, please let me know.

The page of 1920 design draft, how to solve the problem that the font becomes bigger under the low split screen such as 1366? .
as the title, the pc page is based on the 1920 design draft. Now it is found that the font is very large under the low split screen such as 1366. How to solve this problem? .. you don t need to adapt to the mobile end, you just need to look better on ...

Front-end javascript css3 css html

Mar.02,2021