Implementing Text Ellipsis on Multiple Lines
While CSS alone can enable text truncation with ellipsis for single-line overflow, achieving the same effect over multiple lines can pose a challenge. The question, "Text overflow ellipsis on two lines [duplicate]," explores this issue.
At first glance, the combination of CSS properties like text-overflow: ellipsis and white-space: nowrap seems sufficient for text truncation. However, white-space: nowrap prevents text from wrapping, leading to truncated text on a single line despite sufficient space for further lines.
To overcome this limitation, consider the following CSS properties:
Using these properties, you can achieve multi-line text ellipsis as follows:
display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis;
This CSS solution effectively allows text to overflow onto multiple lines and be truncated with ellipsis when the specified line limit is reached.
The above is the detailed content of How to Implement Multi-Line Text Ellipsis with CSS?. For more information, please follow other related articles on the PHP Chinese website!