Cut long text with an ellipsis, either on a single line or after a set number of lines. This is very useful for post titles and excerpts in cards.

Single line ellipsis

.lotgrafix-title {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

Multi-line ellipsis

.lotgrafix-excerpt {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    overflow: hidden;
}

Change the number to set how many lines are visible.

Use it in a WordPress loop

<h3 class="lotgrafix-title"><?php the_title(); ?></h3>
<div class="lotgrafix-excerpt"><?php the_excerpt(); ?></div>

Notes

• The element needs overflow: hidden or the text will not be cut.
• Keep the -webkit- prefixed properties for browser compatibility.
• Add a title attribute or keep the full text accessible when truncating important content.