1. A single-line text overflow requires three conditions:
Overflow:hidden; White-space:nowrap; Text-overflow:ellipsis;
2. Multiple lines of text overflow need to meet the following conditions:
Display:-webkit-box; Overflow:hidden;
Text-overflow:ellipsis; Word-break:break-all;
-webkit-box-orient:vertical; Child elements should be arranged horizontally or vertically
-webkit-line-clamp:3; 3 lines after the ellipsis is displayed
Examples are as follows:
<!DOCTYPE HTML><HTML><Head> <MetaCharSet= "Utf-8"> <Metaname= "Viewport"content= "Width=device-width,initial-scale=1"> <title>H5</title></Head><styletype= "Text/css"> *{margin:0;padding:0; }. Inoneline{Overflow:Hidden;White-space:nowrap;Text-overflow:ellipsis; }. Intwoline{Display:-webkit-box;Overflow:Hidden;Text-overflow:ellipsis;Word-break:Break-all;-webkit-box-orient:Vertical;-webkit-line-clamp:3; }</style><Body> <Divclass= "Inoneline">The world is very small to accompany you to the ends of the earth in the corner without trouble to stop looking at the carefree time to grow old</Div> <Divclass= "Intwoline">just once, I'll take you to see forever in the sunny days of laughter in the air of freedom noisy you know I will you want the world is very small with you to go to the ends of the earth in no trouble in the corner to stop looking at the carefree time to grow old you know all my heart beats with you once I take you to see the Everlasting in the sun Bright days laughing in the air of freedom noisy you know I will you want</Div></Body></HTML>View Code
The effect is as follows:
Single-line text overflow and multiline text overflow
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
