How to Create a Multi-Line Text Overflow with Ellipsis in CSS?

Multi-Line Text Overflow with Ellipsis in CSS

Achieving text overflow with ellipsis but allowing multiple lines can be challenging. However, CSS properties can effectively accomplish this.

To create a three-line ellipsis effect, utilize the following code:

display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;

This code utilizes the "-webkit-box" and "-webkit-line-clamp" properties to force the text into a box with three lines. The "-webkit-box-orient" property sets the orientation to vertical, while "overflow: hidden" and "text-overflow: ellipsis" create the ellipsis effect.

If you encounter browser compatibility issues, try the following fallback option:

display: flex;
flex-wrap: wrap;
line-height: 1.5em;
height: 4.5em;
overflow: hidden;
text-overflow: ellipsis;

These properties also force the text into multiple lines and allow ellipsis overflow.

The above is the detailed content of How to Create a Multi-Line Text Overflow with Ellipsis in CSS?. For more information, please follow other related articles on the PHP Chinese website!