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

本文以CSS3中text-overflow為例，為大家分析CSS3中text-overflow的使用方法。閱讀完整文相信大家對(duì)CSS3中text-overflow的使用方法有了一定的認(rèn)識(shí)。

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

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

CSS3中text-overflow的使用方法

附加說明

1、總體寬度是500px,在頁面中居中顯示

2、標(biāo)題字體大小是22px,其他字體是16px

3、超級(jí)開心果作者的名稱靠最左，時(shí)間2天前顯示靠最右、

4、所有的小圖標(biāo)都是20px大小顯示

5、標(biāo)題全文是：路遙《平凡的世界》，激勵(lì)了無數(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)分成上下兩個(gè)部分，第一個(gè)部分是一個(gè)大的標(biāo)題，但是這個(gè)標(biāo)題帶省略號(hào)，說明他里面的文字超出了容器的大寬度

2、下面部分是一個(gè)列表，列表顯示從左到右依次是，作者名稱，一個(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ì)了無數(shù)的青年，鼓舞了無數(shù)人的心
       </div>
       <div class="bottom">
           <ul>
               <li><span class="text">超級(jí)開心果</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;重點(diǎn)是如果標(biāo)題長(zhǎng)度過長(zhǎng)，我們需要讓它按照帶省略號(hào)的方式顯示所以這樣一來我們需要這樣寫：

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沒有帶有黑色圓點(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è)灰色的豎線，我們可以將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

因?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é)果來看，它和右邊的元素存有右邊距，所以我們可以寫成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ì)了無數(shù)的青年，鼓舞了無數(shù)人的心
       </div>
       <div class="bottom">
           <ul>
               <li><span class="text">超級(jí)開心果</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)行效果如下：

CSS3中text-overflow的使用方法

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

總結(jié)：

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

text-overflow:ellipsis;

overflow:hidden;

white-space:nowrap;

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

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

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

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

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