Home > Developer > Web Develop
Test code:
1 <!DOCTYPE HTML>2 <HTML>3 4 <Head>5 <Metaname= "Viewport"content= "Width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">6 <Metahttp-equiv= "Content-type"content= "text/html; charset=utf-8">7 <Metaname= "Apple-mobile-web-app-capable"content= "Yes">8 <Metaname= "Apple-mobile-web-app-status-bar-style"content= "BLACK">9 <Metacontent= "Telephone=no"name= "Format-detection">Ten <Metacontent= "On"http-equiv= "X-dns-prefetch-control"> One <title>Test CSS3 to implement an ellipsis instead of a specified number of lines of text (specify text length)</title> A <style> - . Unilinetext{ /*sets the text to a single line if the length is exceeded with an ellipsis instead of*/ - width:300px; the Overflow:Hidden; - Text-overflow:ellipsis; - -o-text-overflow:ellipsis; - -webkit-text-overflow:ellipsis; + -moz-text-overflow:ellipsis; - White-space:nowrap; /*text in a specified paragraph does not wrap*/ + } A at . Multilinetext{ /*sets the text to multiple lines if the length is exceeded with an ellipsis instead of*/ - width:200px; - Word-break:Break-all; - Display:-webkit-box; - -webkit-line-clamp:3; /*limit the number of lines of text displayed in a block element*/ - -webkit-box-orient:Vertical; in Overflow:Hidden; - } to </style> + </Head> - the <Body> * <H1>The test displays a line of text:</H1> $ <Divclass= "Unilinetext">Panax Notoginseng text-overflow:ellipsis can be used in the case of multiple lines of text, using ellipses to hide out-of-range text; white-space:nowrap the text in the paragraph does not wrap;-webkit-box-orient:ve Rtical limit the number of lines of text displayed in a block element - </Div> the <H1>Test two or more lines of text:</H1> + <Divclass= "Multilinetext"> A text-overflow:ellipsis can be used in the case of multiple lines of text, using ellipses to hide out-of-range text; white-space:nowrap the text in the paragraph does not wrap;-webkit-box-orient:ve Rtical limit the number of lines of text displayed in a block element the </Div> + - </Body> $ $ </HTML>
In this test code, multiple lines of text with the ellipsis code only compatible with the WebKit kernel browser, other kernel solutions are not found, if any god knows please tell me, thank you!
CSS3 to implement a specified number of lines beyond the text (specify text length) with ellipses instead of
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
