CSS3 new attribute text-overflow (Omitted character) practical development details, css3text-overflow

CSS3 new attribute text-overflow (Omitted character) practical development details, css3text-overflow
Someone may ask whyText-overflowExplain it separately. In the past, when the content of a row was incomplete, javascript and other means were required to display the omitted characters. But CSS3 introducedText-overflowIt can be implemented with only one line of code. The development method is concise, powerful, and self-evident. In this article, I will show you how to make a news navigation list of toutiao.com and show you the strong charm of text-overfow. Let's take a look at the results first: Well, after reading the results, let's officially start today's development journey! First, create an html page. The Code is as follows (RedText is the main content of our Demo ):

<! DOCTYPE html> <Div class = "sidebar"><Dl><Dt> toutiao.com </dt><Dd><Ul><Li> <a href = "http://www.itdriver.cn"> Xunlei bath blood IPO staff cold: airborne executives taotao </a> </li><Li> <a href = "http://www.itdriver.cn"> Xiaomi 4 front panel spy shot with ultra-narrow border design </a> </li><Li> <a href = "http://www.itdriver.cn"> in the online tourism market, Ctrip will become a shareholder in Yilong? </A> </li><Li> <a href = "http://www.itdriver.cn"> Du Yue, vice president of rennet, dismissed Chen Yizhou for negative reasons </a> </li></Ul></Dd></Dl></Div></Div> </body>

After the page is created, run it to check the effect. Based on 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 that matches all elements on the page and clears the default outer margin of all elements on the page. The default inner margin */padding: 0px; margin: 0px; color: #000;} a: link {/* set the style when the hyperlink is not accessed */text-decoration: none;}: hover {/* display style when the mouse slides over the 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 and check whether the page is running. Next, add the shadow border and shadow effect to the List, and add the background color to the title. The Code is as follows (in red ):

* {/* This is a wildcard that matches all elements on the page and clears the default outer margin of all elements on the page. The default inner margin */padding: 0px; margin: 0px; color: #000;} a: link {/* set the style when the hyperlink is not accessed */text-decoration: none;}: hover {/* display style when the mouse slides over the 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 {/* set the border of the List, and set the rounded corner of the list and the shadow effect */Border: 1px solid # 80C8FE;-Webkit-border-radius: 10px;-Moz-border-radius: 10px;Border-radius: 10px;Box-shadow: 6 PX 6px 6px #666;}. Sidebar dt {/* Set the title style */Height: 2em;/* Set the title height and line height to center the text vertically */Line-height: 2em;Padding-left: 4px; /* Set the background color of the title line */Color: # FFF;/* Set the text color */Font-weight: bold;/* Adjust the bold text display */-webkit-border-top-left-radius: 8px;/* set the left and top rounded corners of the title line */-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 view the modified results. Now, the style of our list border and list header is ready. Finally, let's use Text-overflowTo set Omitted characterStyle. 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 the size of the outer box */margin: 10px auto; font-size: 0.8em ;}. sidebar dd li {/* sets the distance between news lists, and does not wrap, and displays the omitted character */margin-top: 4px; padding: 2px 4px;Text-overflow: ellipsis;}

We added the attribute in li.   Text-overflow: ellipsis.Next, run the page to check the effect: No, we have added Text-overflow: ellipsisWhy haven't the symbols been omitted yet. As the name implies, this attribute represents After the text limit is exceeded,Add the omitted symbol. However, we can see the running effect, and the page text is automatically wrapped. Now we will not allow it to wrap, add White-space: nowrap. The Code is as follows:

. Sidebar dd {/* set the spacing between dd and dt, and set the font to 0.8 times the size of the outer box */margin: 10px auto; font-size: 0.8em ;}. sidebar dd li {/* sets the distance between news lists, and does not wrap, and displays the omitting character */margin-top: 4px; padding: 2px 4px; text-overflow: ellipsis;White-space: nowrap;}

Let's run it again to see the page effect: we can see that the above example is no longer a line break, but the content is still displayed beyond the range, then we will make it out of the range not to display ( Text-overflow: hidden;). The modification code is as follows:

. Sidebar dd {/* set the spacing between dd and dt, and set the font to 0.8 times the size of the outer box */margin: 10px auto; font-size: 0.8em ;}. sidebar dd li {/* sets the distance between news lists, and does not wrap, and displays the omitting character */margin-top: 4px; padding: 2px 4px; text-overflow: ellipsis; white-space: nowrap;Overflow: hidden;}

Now, let's run the html page to see the modified results: I am very excited and finally get the expected results. From these steps, we can also see that the text-overflow omitted character attribute only tells the browser: If there is no line break in the text, the overflow range is reached. If you hide the overflow content, I will show you an escape character.So far, haha,   Text-overflow, White-space, OverflowThese three attributes are more like an iron triangle. Welcome to the internet technology exchange QQ group: 62329335  Personal statement: the shared blog is absolutely original, and strives to verify every knowledge point through practical demonstration.