How to truncate text multiple lines using CSS?

To truncate text across multiple lines using CSS properties.

1. Flexbox:
Use flexbox to truncate text across required lines.

Example:
.truncate {
    display: flex;
    flex-wrap: wrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-height: 3em; /* truncate after 3 lines */
}

2. CSS Grid:
Use CSS Grid to truncate text across required lines.

Example:
.truncate {
display: grid;
grid-template-rows: repeat(3, 1fr); /* truncate after 3 lines */
overflow: hidden;
text-overflow: ellipsis;
}

3. Webkit box:
Use the webkit-line-clamp property to truncate text after a specified number of lines.

Example:
.truncate {
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 3; /* truncate after 3 lines */
-webkit-box-orient: vertical;
}

text-overflow: ellipsis
Use text-overflow: ellipsis CSS property that truncates text and adds an ellipsis (...) to the end of the truncated text,

text-overflow: clip
Use text-overflow: clip that truncates the text without adding an ellipsis.

text-overflow: "[sring]" 
Use text-overflow: "[sring]" that allows you to specify a custom string to display instead of the ellipsis.

Note: Check browser support compatibility.