in What I have learned today

What I have learned today 2016.09.29

#1 The text-overflow CSS property

This is super useful when you don’t have enough space for some content. For example a title, a description, an excerpt.

What does it do? It determines how overflowed content that is not displayed is clipped and it adds this nice ... at the end.

It has to be applied to block container elements (or inline-block).

How does it look?

This is my clipped text content which is bigger than the container where it is added and using text-overflow:ellipsis it make this nice clipping

To make it work you have to add also white-space: nowrap; and overflow: hidden;

Enjoy! 😉

Write a Comment