Multi-Line Text Ellipsis: Is It Possible with Pure CSS?

Text Ellipsis on Multiple Lines: Is It Possible?

The ability to truncate overflowing text with an ellipsis (...) is a common CSS requirement. However, the standard text-overflow property only works on a single line. This raises the question: can we replicate this behavior on multiple lines, allowing text to wrap as needed?

The answer is a resounding yes. With CSS properties designed specifically for this purpose, it's possible to achieve the desired effect without resorting to JavaScript. For instance:

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

This code will create a div that displays text on up to three lines, with the remaining text replaced by an ellipsis. By adjusting the -webkit-line-clamp property, you can control the maximum number of lines displayed.

Keep in mind that this technique currently works only in WebKit-based browsers like Safari and Chrome. If you need cross-browser compatibility, you may consider using a polyfill or a more complex JavaScript solution.

The above is the detailed content of Multi-Line Text Ellipsis: Is It Possible with Pure CSS?. For more information, please follow other related articles on the PHP Chinese website!