Customizing your widgets using Additional CSS

The Additional CSS field allow you to customize widgets pretty much any way you want them. Using Additional CSS you can define your own CSS rules, creating beautiful designs tailor-made for your website.

How can I limit number of lines for the post title and post content?

You can use the following chunk of code to limit the post title to 2 lines:

.post-title-{{cssId}} {
    line-height: 1.2rem;
    max-height: 2.4rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

Adjust the value of -webkit-line-clamp to change number of lines.

Since this solution will not work for Firefox you need to make sure to set line-height of each line and a max-height that corresponds to line-height x number of lines.

You can use the exact same trick for post content of your widgets. The following example demonstrates how to limit post content to 3 lines:

.post-content-{{cssId}} {
    line-height: 1rem;
    max-height: 3rem;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

How did we do?

Finding and using fonts for your widget

Using passbacks when widget is empty

Contact