CSS3 attribute Text-overflow (ellipsis) practical development

First look at the effect: well, after reading the effect, now formally start today's development journey! First we create the HTML page, the code looks like this ( RedThe text is the main content of our demo):

<! DOCTYPE html><div class= "sidebar" ><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& gt;<li><a href= "http://www.itdriver.cn" > Xiaomi 4 front panel spy illumination 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: according to the picture above, 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 the elements in the page, clears the default margin for all elements of the page, the default padding */padding:0px;margin:0px;color: #000;} a:link{/* Set hyperlink not accessed when style */text-decoration:none;} a:hover{/* The style displayed when the mouse slides over a hyperlink */color: #F30; text-decoration:underline;}. sidebar{/* Set sidebar to fixed width */margin:10px auto;width:200px;}. Sidebar ul{/* Clear UL default style */list-style-type:none;}

Run the HTML page to see the run: 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 (Red font section):

*{/* This is a wildcard character that matches all the elements in the page, clears the default margin for all elements of the page, the default padding */padding:0px;margin:0px;color: #000;} a:link{/* Set hyperlink not accessed when style */text-decoration:none;} a:hover{/* The style displayed when the mouse slides over a hyperlink */color: #F30; text-decoration:underline;}. sidebar{/* Set sidebar to fixed width */margin:10px auto;width:200px;}. Sidebar ul{/* Clear the 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 the title style */Height:2em;/* Set the title height and row height so that the text is centered vertically */Line-height:2em;padding-left:4px; /* Set the background color of the title row */color: #FFF;/* Set Text color */Font-weight:bold;/* Adjust text and 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 is already good: Finally, let us use Text-overflowTo set ellipsisStyle it. Add the following code to the style sheet:

. 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 display ellipsis */margin-top:4px;padding:2px 4px; text-overflow:ellipsis;}

We've added attributes to Li.   text-overflow:ellipsis. Then we run the page and look at the effect: No, we've added text-overflow:ellipsisattribute, how has not omitted the symbol yet. In fact, as the name implies, this attribute represents the after the text exceeds the limit,Add the ellipsis symbol. 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 display ellipsis */margin-top:4px;padding:2px 4px;text-overflow:ellipsis; white-space:nowrap;}

Let's run a look at the page effect: We see the above example, now no more line, but the content is out of range still show, 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 display ellipsis */margin-top:4px;padding:2px 4px;text-overflow:ellipsis;white-space:nowrap; Overflow:hidden;}

We will now run the HTML page to see the effect of the changes: 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 attribute, just tell the browser: If the text does not wrap, the overflow range, if you hide the overflow content, then I will show you the ellipsis. That's it, haha,   Text-overflow， White-space， OverflowThese three properties, more like an iron triangle.