[CSS] Truncate long text to a number of lines

p.intro {
    width: 300px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3; /* Truncate when no. of lines exceed 3 */
    overflow: hidden;
}

Truncate overflowing text:

p.intro {
    width: 300px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

• Explicit width, so bounds for clipping will ever be reached.
• Browser wraps below long text that do not fit within an element's width. So you need to prevent that: white-space: nowrap;.
• Content that overflows should be clipped: overflow: hidden;.
• Pad a string with an ellipsis(...) when text is about to be clipped: text-overflow: ellipsis;.

 

Read more: https://dev.to/smitterhane/13-css-tricks-that-will-give-you-an-adrenaline-rush-5908