The objective is to achieve the following:
https://i.sstatic.net/lcChx.png
However, the challenge lies in adding two "hardcoded" elements at the end of row 2:
- The "# more" button (only when necessary)
- The "face-plus" button (always)
This pertains to the "ellipsis" effect that I am seeking to implement.
I have experimented with the code below:
// HTML
<div class="container">
<div class="children">
Hola1
</div>
<div class="children">
Hola2
</div>
<div class="children">
Hola3
</div>
<div class="children">
Hola4
</div>
<div class="children">
Hola5
</div>
<div class="children">
Hola6
</div>
</div>
// css
.container {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: flex-start;
width: 150px;
border: 1px solid black;
padding: 5px;
height: 80px; // this makes the trick of having 2 rows
overflow: hidden; // this makes the trick of having 2 rows
}
.children {
border: 1px solid black;
margin: 5px;
padding: 5px;
}
The result I achieved was as follows:
https://i.sstatic.net/3CDOo.png
Nevertheless, I am facing difficulties in appending the "fixed" elements at the end of row 2 due to other concealed elements in the list.
Several key considerations include:
- The element widths are variable.
- A maximum of 2 rows should be displayed.
- By the end of row 2, the "# more" button and face icon must be present (with the former only appearing if necessary).
Your assistance is greatly appreciated