站長資訊網(wǎng)本文目標(biāo)：
1、掌握文本帶省略號的顯示效果
問題：
1、實現(xiàn)以下效果，要求使用純DIV+CSS，不適用任何框架
附加說明
1、總體寬度是500px,在頁面中居中顯示
2、標(biāo)題字體大小是22px,其他字體是16px
3、超級開心果作者的名稱靠最左，時間2天前顯示靠最右、
4、所有的小圖標(biāo)都是20px大小顯示
5、標(biāo)題全文是：路遙《平凡的世界》，激勵了無數(shù)的青年，鼓舞了無數(shù)人的心
現(xiàn)在來具體操作
1、準(zhǔn)備素材：根目錄創(chuàng)建images文件夾，把相關(guān)素材圖片都存放與此，素材有
2、創(chuàng)建好index.html，寫好架構(gòu)，架構(gòu)如何分析呢
思路分析：
1、目標(biāo)分成上下兩個部分，第一個部分是一個大的標(biāo)題，但是這個標(biāo)題帶省略號，說明他里面的文字超出了容器的最大寬度
2、下面部分是一個列表，列表顯示從左到右依次是，作者名稱，一個很火的標(biāo)志，點贊數(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文本帶省略號實現(xiàn)案例</title> </head> <body> <div class="container"> <div class="top"> 路遙《平凡的世界》，激勵了無數(shù)的青年，鼓舞了無數(shù)人的心 </div> <div class="bottom"> <ul> <li><span class="text">超級開心果</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、寫樣式
思路分析：
1、.container *
思路分析
1、為了設(shè)置容器里的所有元素的公共樣式，我們可以將這些公共代碼寫入.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;重點是如果標(biāo)題長度過長，我們需要讓它按照帶省略號的方式顯示所以這樣一來我們需要這樣寫：
text-overflow:ellipsis; （當(dāng)超出的時候帶省略號）
overflow:hidden; （當(dāng)超出的時候隱藏）
white-space:nowrap; （當(dāng)超出的時候不換行）
2、上下兩個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沒有帶有黑色圓點，所以list-style: none;而且是水平排列的，所以float: left;
所以index.css添加代碼如下：
ul li{ list-style: none; float: left; }
5、 li.clear
因為li都是浮動的，所以最后一列要清除浮動,所以clear:both,float:none，且為了不影響布局li.clear的寬度和高度都要設(shè)置為0
所以index.css添加代碼如下：
li.clear{ clear: both; float: none; width:0; height:0; }
6、li.zan
因為顯示點贊信息所在的列，和第一列存在一定的左邊距，和右邊的列存在右邊距，所以我們設(shè)置成margin-left:100px; margin-right:30px;
又因為還有一個灰色的豎線，我們可以將li的右邊框顯示出來，大小為1px，顏色為淺灰色，所以border-right: 1px solid lightgray;
所以index.css添加代碼如下：
li.zan{ margin-left:100px; margin-right:35px; border-right: 1px solid lightgray; }
7、li.date
因為顯示日期的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、因為從結(jié)果來看，它和右邊的元素存有右邊距，所以我們可以寫成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的全部內(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文本帶省略號實現(xiàn)案例</title> <link rel="stylesheet" href="css/index.css" /> </head> <body> <div class="container"> <div class="top"> 路遙《平凡的世界》，激勵了無數(shù)的青年，鼓舞了無數(shù)人的心 </div> <div class="bottom"> <ul> <li><span class="text">超級開心果</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>
運行效果如下：
到此為止，我們就實現(xiàn)了全部的需求
總結(jié)：
1、學(xué)習(xí)了如何讓文本帶省略號顯示，主要代碼如下：
text-overflow:ellipsis;
overflow:hidden;
white-space:nowrap;
希望本文能給大家?guī)硪欢ǖ膸椭x謝！！！
