What I have learned today 2016.09.29

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.

.clipped-text {
    text-overflow: ellipsis;
}

.clipped-text {

text-overflow: ellipsis;

}

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;

Published