Intermediate
Truncate a product card
The card is 220px wide. Keep the product title on one line and end it with … when it's too long.
Show at most two lines of the description (line height is 20px) and cut the rest.
Make sure the long product code can't stick out of the card.
What Check tests
- The title stays on one line
- The title is clipped with an ellipsis
- The description shows at most two lines
- The description text is still all in the page
- The product code doesn't overflow the card
Stuck? One hint at a time
The solution unlocks after your first Check. Try first: that is where the learning happens.
Runs in your browser. Your code is saved here.
Your page
Press Run to see the page.
Console
Nothing logged yet.