Home > Developer > Web Develop
Someone would ask, why I took text-overflow out alone to explain. Previously, when a line of content is not complete, you want to display the ellipsis, you need to use JavaScript and other means.
But CSS3 introduced the text-overflow ellipsis attribute, only need a short line of code can be implemented, the development of a simple and powerful way of self-evident.
This article, I said to lead you to make a "today headline" News navigation list, to lead you to appreciate the text-overfow of the powerful charm. First look at the effect:
650) this.width=650; "class=" Alignnone size-full wp-image-35 "alt=" clipboard "src=" http://www.itdriver.cn/wp-content /uploads/2014/08/clipboard.png "width=" 233 "height=" 174 "style=" border:1px solid RGB (204,204,204);p adding:2px; "/ >
Well, after reading the effect, now formally start the development journey today!
First we create the HTML page, the code is as follows (the red text is the main content of our demo):
<! DOCTYPE html> <meta charset= "utf-8″> <link rel= "stylesheet" href= "Styles.css" > <title>text-overflow Example </title> <body> <div> <div> <dl> <dt> Today's Headlines </dt> <dd> <ul> <li><a href= "http://www.itdriver.cn" > Thunderbolt Blood IPO staff chilling: Airborne executives pick Peach </a></li> <li><a href= "http://www.itdriver.cn" > Xiaomi 4 front panel spy photo exposure with ultra-narrow bezel design </a></li> <li><a href= "http://www.itdriver.cn" > Online tourism Market Change Ctrip will be a stake in Art Dragon? </a></li> <li><a href= "http://www.itdriver.cn" > Vice President of Human network Du Yue quit shelling Chen a boat for people negative </a></li> </ul> </dd> </dl> </div> </div> </body> |
Once the page has been created, let's run it and look at the effect:
650) this.width=650; "class=" Alignnone size-medium wp-image-36 "alt=" clipboard02 "src=" http://www.itdriver.cn/ Wp-content/uploads/2014/08/clipboard02-300x106.png "width=" "height=" 106 "style=" border:1px solid RGB ( 204,204,204);p adding:2px; "/>
According to the above picture, the first step is to clear the default style of each element. Let's write our external style file table together:
*{/* This is a wildcard character that matches all elements in the page, clears the default margin for all elements of the page, and the default padding */ padding:0px; margin:0px; Color: #000; } a:link{/* Set hyperlink not visited style */ Text-decoration:none; } a:hover{/* The style that appears when the mouse slides over a hyperlink */ Color: #F30; Text-decoration:underline; } . sidebar{/* Set the sidebar to a fixed width */ margin:10px Auto; width:200px; } . Sidebar ul{/* Clear UL Default Style */ List-style-type:none; } |
Run the HTML page to view the run at this time:
650) this.width=650; "class=" Alignnone size-full wp-image-37 "alt=" clipboard03 "src=" http://www.itdriver.cn/ Wp-content/uploads/2014/08/clipboard03.png "width=" 249 "height=" 188 "style=" border:1px solid rgb (204,204,204); padding:2px; "/>
Next we'll add a shaded border to the list, as well as a shadow effect, plus a background color for the title, as shown in the code below (the Red Font section ):
*{/* This is a wildcard character that matches all elements in the page, clears the default margin for all elements of the page, and the default padding */ padding:0px; margin:0px; Color: #000; } a:link{/* Set hyperlink not visited style */ Text-decoration:none; } a:hover{/* The style that appears when the mouse slides over a hyperlink */ Color: #F30; Text-decoration:underline; } . sidebar{/* Set the sidebar to a fixed width */ margin:10px Auto; width:200px; } . Sidebar ul{/* Clear UL Default Style */ List-style-type:none; } . Sidebar dl{ / * Sets the border of the list and sets the rounded corners of the list, as well as the shadow effect * / border:1px solid #80C8FE; -webkit-border-radius:10px; -moz-border-radius:10px; border-radius:10px; box-shadow:6px 6px 6px #666; } . Sidebar dt{/* Set Title style * / Height:2em; / * Set the title height and row height so that the text is centered vertically * / Line-height:2em; padding-left:4px; background-color: #80C8FE; / * Set the background color of the title row * / color: #FFF; / * Set Text color * / Font-weight:bold; / * Adjust text bold display * / -webkit-border-top-left-radius:8px; /* Set the upper-left and top-right rounded effect of the title row */ -moz-border-top-left-radius:8px; border-top-left-radius:8px; -webkit-border-top-right-radius:8px; -moz-border-top-right-radius:8px; border-top-right-radius:8px; } |
Run the HTML page to see the effect after the modification, now our list border, the list header style has been good:
650) this.width=650; "class=" Alignnone size-full wp-image-38 "alt=" clipboard04 "src=" http://www.itdriver.cn/ Wp-content/uploads/2014/08/clipboard04.png "width=" 242 "height=" 208 "style=" border:1px solid rgb (204,204,204); padding:2px; "/>
Finally, let's use Text-overflow to set the ellipsis style. Add the following code to the style sheet:
| < P>.sidebar dd{/* Sets the spacing between DD and DT and sets the font to 0.8 times times the size of the outer frame */ margin:10px Auto; " &NBSP; .sidebar DD li{/* Sets the distance between news lists and sets no line breaks, and displays ellipses */ margin-top:4px; text-overflow:ellipsis;
|
In Li we added the attribute text-overflow:ellipsis. then we run the page to see how this works:
650) this.width=650; "class=" Alignnone size-full wp-image-39 "alt=" clipboard05 "src=" http://www.itdriver.cn/ Wp-content/uploads/2014/08/clipboard05.png "width=" 265 "height=" 238 "style=" border:1px solid rgb (204,204,204); padding:2px; "/>
No, we've added the text-overflow:ellipsis attribute, so why haven't we omitted the symbol yet? In fact, as the name implies, this property represents the text beyond the limit, add the ellipsis. However, we look at the effect of the run, the page text is automatically wrapped.
Now we're not going to let it change, plus white-space:nowrap. The code looks like this:
. Sidebar dd{/* Set the spacing between DD and DT and set the font to 0.8 times times the size of the outer frame */ margin:10px Auto; Font-size:0.8em; } . sidebar DD li{/* Sets the distance between news lists and sets no line breaks, and displays ellipses */ margin-top:4px; PADDING:2PX 4px; Text-overflow:ellipsis; White-space:nowrap; } |
Let's run and look at the page effect:
650) this.width=650; "class=" Alignnone size-full wp-image-40 "alt=" clipboard06 "src=" http://www.itdriver.cn/ Wp-content/uploads/2014/08/clipboard06.png "width=" 277 "height=" 176 "style=" border:1px solid rgb (204,204,204); padding:2px; "/>
We see the above example, now no more line, but the content is still out of range, OK, then we let it go out of scope is not displayed (Text-overflow:hidden;). Modify the code as follows:
. Sidebar dd{/* Set the spacing between DD and DT and set the font to 0.8 times times the size of the outer frame */ margin:10px Auto; Font-size:0.8em; } . sidebar DD li{/* Sets the distance between news lists and sets no line breaks, and displays ellipses */ margin-top:4px; PADDING:2PX 4px; Text-overflow:ellipsis; White-space:nowrap; Overflow:hidden; } |
Let's run the HTML page again to see what we've changed:
650) this.width=650; "class=" Alignnone size-full wp-image-41 "alt=" clipboard07 "src=" http://www.itdriver.cn/ Wp-content/uploads/2014/08/clipboard07.png "width=" 231 "height=" 172 "style=" border:1px solid rgb (204,204,204); padding:2px; "/>
See above, the mood is very excited, finally get the desired effect.
From these steps, we can also probably see that, in fact, the Text-overflow ellipsis property, just tell the browser: if the text is not wrapped, overflow range, if you hide the overflow content, then I will show you the ellipsis.
At this point, haha , text-overflow,white-space,overflow These three properties, more like an iron triangle AH.
Welcome everyone to join the Internet Technology Exchange QQ Group:62329335
Personal statement: Share the blog, absolutely original, and strive to each knowledge point through the actual demonstration to verify.
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
