站長(zhǎng)資訊網(wǎng)本文目標(biāo)：
1、掌握文本帶省略號(hào)的顯示效果
問(wèn)題：
1、實(shí)現(xiàn)以下效果，要求使用純DIV+CSS，不適用任何框架
附加說(shuō)明
1、總體寬度是500px,在頁(yè)面中居中顯示
2、標(biāo)題字體大小是22px,其他字體是16px
3、超級(jí)開(kāi)心果作者的名稱(chēng)靠最左，時(shí)間2天前顯示靠最右、
4、所有的小圖標(biāo)都是20px大小顯示
5、標(biāo)題全文是：路遙《平凡的世界》，激勵(lì)了無(wú)數(shù)的青年，鼓舞了無(wú)數(shù)人的心
現(xiàn)在來(lái)具體操作
1、準(zhǔn)備素材：根目錄創(chuàng)建images文件夾，把相關(guān)素材圖片都存放與此，素材有
2、創(chuàng)建好index.html，寫(xiě)好架構(gòu)，架構(gòu)如何分析呢
思路分析：
1、目標(biāo)分成上下兩個(gè)部分，第一個(gè)部分是一個(gè)大的標(biāo)題，但是這個(gè)標(biāo)題帶省略號(hào)，說(shuō)明他里面的文字超出了容器的最大寬度
2、下面部分是一個(gè)列表，列表顯示從左到右依次是，作者名稱(chēng)，一個(gè)很火的標(biāo)志，點(diǎn)贊數(shù)，留言數(shù)，還有文字的發(fā)表日期，按天數(shù)顯示
根據(jù)分析，我們得出以下代碼
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>CSS3文本帶省略號(hào)實(shí)現(xiàn)案例</title> </head> <body> <div class="container"> <div class="top"> 路遙《平凡的世界》，激勵(lì)了無(wú)數(shù)的青年，鼓舞了無(wú)數(shù)人的心 </div> <div class="bottom"> <ul> <li><span class="text">超級(jí)開(kāi)心果</span></li> <li class="zan"> <img src="images/fire.png" class="icon fireicon"/> <img src="images/zan.png" class="icon zanicon"/> <span class="text">45</span> </li> <li class="liuyan"> <img src="images/msg.png" class="icon"/> <span class="text">0</span> </li> <li class="date"> <span class="text">2天前</span></li> <li class="clear"></li> </ul> </div> </div> </body> </html>
3、寫(xiě)樣式
思路分析：
1、.container *
思路分析
1、為了設(shè)置容器里的所有元素的公共樣式，我們可以將這些公共代碼寫(xiě)入.container * 樣式內(nèi)
所以index.css中添加代碼如下：
.container *{ padding:0; margin: 0; }
2、.container
思路分析
1、根據(jù)上述要求得知，width=500px,然后要求居中，所以轉(zhuǎn)成代碼即margin:0 auto;
所以index.css中添加代碼如下：
.container{ width: 500px; margin:0 auto; }
3、.top
思路分析
1、根據(jù)上述要求得知，它的寬度是100%，然后標(biāo)題要居中顯示，即text-align: center;大小是22px即font-size: 22px;重點(diǎn)是如果標(biāo)題長(zhǎng)度過(guò)長(zhǎng)，我們需要讓它按照帶省略號(hào)的方式顯示所以這樣一來(lái)我們需要這樣寫(xiě)：
text-overflow:ellipsis; （當(dāng)超出的時(shí)候帶省略號(hào)）
overflow:hidden; （當(dāng)超出的時(shí)候隱藏）
white-space:nowrap; （當(dāng)超出的時(shí)候不換行）
2、上下兩個(gè)div存在一定的間距，間距為22px，即margin-bottom: 20px;
所以index.css中添加代碼如下：
.top{ width: 100%; text-align: center; font-size: 22px; text-overflow:ellipsis; overflow:hidden; white-space:nowrap; margin-bottom: 20px; }
4、ul,li
根據(jù)效果得知，所有的li沒(méi)有帶有黑色圓點(diǎn)，所以list-style: none;而且是水平排列的，所以float: left;
所以index.css添加代碼如下：
ul li{ list-style: none; float: left; }
5、 li.clear
因?yàn)閘i都是浮動(dòng)的，所以最后一列要清除浮動(dòng),所以clear:both,float:none，且為了不影響布局li.clear的寬度和高度都要設(shè)置為0
所以index.css添加代碼如下：
li.clear{ clear: both; float: none; width:0; height:0; }
6、li.zan
因?yàn)轱@示點(diǎn)贊信息所在的列，和第一列存在一定的左邊距，和右邊的列存在右邊距，所以我們?cè)O(shè)置成margin-left:100px; margin-right:30px;
又因?yàn)檫€有一個(gè)灰色的豎線(xiàn)，我們可以將li的右邊框顯示出來(lái)，大小為1px，顏色為淺灰色，所以border-right: 1px solid lightgray;
所以index.css添加代碼如下：
li.zan{ margin-left:100px; margin-right:35px; border-right: 1px solid lightgray; }
7、li.date
因?yàn)轱@示日期的li，需要顯示到最右邊，所以float:right
所以index.css添加代碼如下：
li.date{ float: right; }
8、.icon
1、根據(jù)要求得知，width,height都是20px
所以index.css添加代碼如下：
.icon{ width:20px; height: 20px; }
9、.fireicon
1、因?yàn)閺慕Y(jié)果來(lái)看，它和右邊的元素存有右邊距，所以我們可以寫(xiě)成padding-right:10px;
.fireicon{ padding-right:10px; }
10、.text
1、根據(jù)要求得知，顏色為灰色 color:gray,字體大小為16px 所以font-size:16px
所以index.css添加代碼如下：
.text{ color:gray; font-size: 16px; }
到此為止，index.css的全部?jī)?nèi)容如下：
.container *{ padding:0; margin: 0; } .container{ width: 500px; margin:0 auto; } .top{ width: 100%; text-align: center; font-size: 22px; text-overflow:ellipsis; overflow:hidden; white-space:nowrap; margin-bottom: 20px; } ul li{ list-style: none; float: left; } li.clear{ clear: both; float: none; width:0; height:0; } li.zan{ margin-left:100px; margin-right:35px; border-right: 1px solid lightgray; } li.date{ float: right; } .icon{ width:20px; height: 20px; } .fireicon{ padding-right:10px; } .text{ color:gray; font-size: 16px; }
然后將index.css引入index.html中
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>CSS3文本帶省略號(hào)實(shí)現(xiàn)案例</title> <link rel="stylesheet" href="css/index.css" /> </head> <body> <div class="container"> <div class="top"> 路遙《平凡的世界》，激勵(lì)了無(wú)數(shù)的青年，鼓舞了無(wú)數(shù)人的心 </div> <div class="bottom"> <ul> <li><span class="text">超級(jí)開(kāi)心果</span></li> <li class="zan"> <img src="images/fire.png" class="icon fireicon"/> <img src="images/zan.png" class="icon zanicon"/> <span class="text">45</span> </li> <li class="liuyan"> <img src="images/msg.png" class="icon"/> <span class="text">0</span> </li> <li class="date"> <span class="text">2天前</span></li> <li class="clear"></li> </ul> </div> </div> </body> </html>
運(yùn)行效果如下：
到此為止，我們就實(shí)現(xiàn)了全部的需求
總結(jié)：
1、學(xué)習(xí)了如何讓文本帶省略號(hào)顯示，主要代碼如下：
text-overflow:ellipsis;
overflow:hidden;
white-space:nowrap;
希望本文能給大家?guī)?lái)一定的幫助，謝謝?。?！
