CSS3中text-overflow的使用方法-創(chuàng)新互聯(lián)

本文以CSS3中text-overflow為例，為大家分析CSS3中text-overflow的使用方法。閱讀完整文相信大家對CSS3中text-overflow的使用方法有了一定的認識。

創(chuàng)新互聯(lián)專業(yè)為企業(yè)提供鎮(zhèn)寧網(wǎng)站建設(shè)、鎮(zhèn)寧做網(wǎng)站、鎮(zhèn)寧網(wǎng)站設(shè)計、鎮(zhèn)寧網(wǎng)站制作等企業(yè)網(wǎng)站建設(shè)、網(wǎng)頁設(shè)計與制作、鎮(zhèn)寧企業(yè)網(wǎng)站模板建站服務(wù)，10余年鎮(zhèn)寧做網(wǎng)站經(jīng)驗，不只是建網(wǎng)站，更提供有價值的思路和整體網(wǎng)絡(luò)服務(wù)。問題：

1、實現(xiàn)以下效果，要求使用純DIV+CSS，不適用任何框架

CSS3中text-overflow的使用方法

附加說明

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)素材圖片都存放與此，素材有

CSS3中text-overflow的使用方法

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>

運行效果如下：

CSS3中text-overflow的使用方法

到此為止，我們就實現(xiàn)了全部的需求

總結(jié)：

1、學(xué)習(xí)了如何讓文本帶省略號顯示，主要代碼如下：

text-overflow:ellipsis;

overflow:hidden;

white-space:nowrap;

關(guān)于CSS3中text-overflow的使用方法就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，可以學(xué)到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。

文章名稱：CSS3中text-overflow的使用方法-創(chuàng)新互聯(lián)
網(wǎng)站鏈接：http://aaarwkj.com/article42/dshdhc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站收錄、App開發(fā)、網(wǎng)站設(shè)計公司、搜索引擎優(yōu)化、網(wǎng)站策劃、全網(wǎng)營銷推廣

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容

欧美一级特黄大片做受成人-亚洲成人一区二区电影-激情熟女一区二区三区-日韩专区欧美专区国产专区

CSS3中text-overflow的使用方法-創(chuàng)新互聯(lián)