站長資訊網
        最全最豐富的資訊網站

        CSS3中text-overflow實現文章標題帶省略號的顯示效果(代碼實例 )

        本文目標:

        1、掌握文本帶省略號的顯示效果

        問題:

        1、實現以下效果,要求使用純DIV+CSS,不適用任何框架

        CSS3中text-overflow實現文章標題帶省略號的顯示效果(代碼實例 )

        附加說明

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

        2、標題字體大小是22px,其他字體是16px

        3、超級開心果作者的名稱靠最左,時間2天前顯示靠最右、

        4、所有的小圖標都是20px大小顯示

        5、標題全文是:路遙《平凡的世界》,激勵了無數的青年,鼓舞了無數人的心

        現在來具體操作

        1、準備素材:根目錄創(chuàng)建images文件夾,把相關素材圖片都存放與此,素材有

        CSS3中text-overflow實現文章標題帶省略號的顯示效果(代碼實例 )

        CSS3中text-overflow實現文章標題帶省略號的顯示效果(代碼實例 )

        CSS3中text-overflow實現文章標題帶省略號的顯示效果(代碼實例 )

        2、創(chuàng)建好index.html,寫好架構,架構如何分析呢

        思路分析:

        1、目標分成上下兩個部分,第一個部分是一個大的標題,但是這個標題帶省略號,說明他里面的文字超出了容器的最大寬度

        2、下面部分是一個列表,列表顯示從左到右依次是,作者名稱,一個很火的標志,點贊數,留言數,還有文字的發(fā)表日期,按天數顯示

        根據分析,我們得出以下代碼

        <!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <meta name="viewport" content="width=device-width, initial-scale=1.0">     <title>CSS3文本帶省略號實現案例</title> </head> <body>     <div class="container">        <div class="top">             路遙《平凡的世界》,激勵了無數的青年,鼓舞了無數人的心        </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、為了設置容器里的所有元素的公共樣式,我們可以將這些公共代碼寫入.container * 樣式內

        所以index.css中添加代碼如下:

        .container *{     padding:0;     margin: 0; }

        2、.container

        思路分析

        1、根據上述要求得知,width=500px,然后要求居中,所以轉成代碼即margin:0 auto;

        所以index.css中添加代碼如下:

        .container{     width: 500px;     margin:0 auto; }

        3、.top

        思路分析

        1、根據上述要求得知,它的寬度是100%,然后標題要居中顯示,即text-align: center;大小是22px即font-size: 22px;重點是如果標題長度過長,我們需要讓它按照帶省略號的方式顯示所以這樣一來我們需要這樣寫:

        text-overflow:ellipsis; (當超出的時候帶省略號)

        overflow:hidden; (當超出的時候隱藏)

        white-space:nowrap; (當超出的時候不換行)

        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

        根據效果得知,所有的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的寬度和高度都要設置為0

        所以index.css添加代碼如下:

        li.clear{     clear: both;     float: none;     width:0;     height:0; }

        6、li.zan

        因為顯示點贊信息所在的列,和第一列存在一定的左邊距,和右邊的列存在右邊距,所以我們設置成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、根據要求得知,width,height都是20px

        所以index.css添加代碼如下:

        .icon{     width:20px;     height: 20px; }

        9、.fireicon

        1、因為從結果來看,它和右邊的元素存有右邊距,所以我們可以寫成padding-right:10px;

        .fireicon{     padding-right:10px; }

        10、.text

        1、根據要求得知,顏色為灰色 color:gray,字體大小為16px 所以font-size:16px

        所以index.css添加代碼如下:

        .text{     color:gray;     font-size: 16px; }

        到此為止,index.css的全部內容如下:

        .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文本帶省略號實現案例</title>     <link rel="stylesheet" href="css/index.css" /> </head> <body>     <div class="container">        <div class="top">             路遙《平凡的世界》,激勵了無數的青年,鼓舞了無數人的心        </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實現文章標題帶省略號的顯示效果(代碼實例 )

        到此為止,我們就實現了全部的需求

        總結:

        1、學習了如何讓文本帶省略號顯示,主要代碼如下:

        text-overflow:ellipsis;

        overflow:hidden;

        white-space:nowrap;

        希望本文能給大家?guī)硪欢ǖ膸椭x謝?。。?/p>

        贊(0)
        分享到: 更多 (0)
        網站地圖   滬ICP備18035694號-2    滬公網安備31011702889846號
        主站蜘蛛池模板: 亚洲精品国产首次亮相| 欧美精品国产一区二区| 日本精品久久久久中文字幕8| 欧美精品国产一区二区三区| aaa级精品久久久国产片| 中国精品18videosex性中国| 黄床大片免费30分钟国产精品| 精品一卡2卡三卡4卡免费视频 | 国产精品对白交换视频| 久久精品一区二区三区中文字幕| 日本一区二区三区精品中文字幕| 精品久久久久久国产潘金莲 | 国产欧美日韩综合精品一区二区三区 | 精品国产91久久久久久久| 亚洲欧美一级久久精品| 精品国产人成亚洲区| 国产精品国产高清国产专区| 思思99热在线观看精品| 国产91大片精品一区在线观看| 少妇精品久久久一区二区三区| 亚洲国产精品ⅴa在线观看| 久久久久亚洲精品中文字幕| 国产精品一区二区av不卡| 国产精品∧v在线观看| 99久久国产综合精品五月天喷水 | 国产精品美女久久久久| 久久久久无码精品国产| 全球AV集中精品导航福利| 无码人妻精品一区二区三区在线| 亚洲精品国产精品国自产观看| 日韩精品一区二区午夜成人版| 四虎精品免费永久免费视频| 人妻少妇精品久久| 亚洲精品高清在线| 亚洲国产精品VA在线看黑人| 亚洲精品白浆高清久久久久久| 亚洲日韩精品A∨片无码| 亚洲国产精品VA在线看黑人| 久久国产欧美日韩精品| 91精品国产色综合久久| 国产91精品在线观看|