CSS Tips Part 3 - Truncate Text #shorts

Key Takeaways

so sometimes we might be outputting a list of blogs on a page but the text snippet might be a bit too long now to combat this we could use two simple css effects so right now we have these div tags one for each blog snippet and the snippet itself is inside the p tags in the css we can target the p tags to shorten those snippets so the first option we have is to truncate the text onto one line to do that set the overflow to hidden white space to no wrap and then set the text overflow property to ellipsis and in a browser it looks like this the other option is to use the line clamp property so again set overflow to hidden and then use the webkit line clamp property and set it to the number of text lines that you want now for this to work we also need to add these other two properties right here and now in a browser we can see that that takes effect awesome