CSS3中text-overflow實作文章標題帶省略號的顯示效果（程式碼實例）-css教學-PHP中文網

本文目標：

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

#問題：

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

CSS3中text-overflow實作文章標題帶省略號的顯示效果（程式碼實例）

附加說明

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

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

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

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

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

現在來具體操作

#1、準備素材：根目錄建立images資料夾，把相關素材圖片都存放與此，素材有

CSS3中text-overflow實作文章標題帶省略號的顯示效果（程式碼實例）

2、創建好index.html，寫好架構，架構如何分析呢

思路分析：

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

#2 、下面部分是一個列表，列表顯示從左到右依次是，作者名稱，一個很火的標誌，點讚數，留言數，還有文字的發表日期，按天數顯示

#根據分析，我們得到以下程式碼

<!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/CSS3中text-overflow實作文章標題帶省略號的顯示效果（程式碼實例 ）" class="icon fireicon"/ alt="CSS3中text-overflow實作文章標題帶省略號的顯示效果（程式碼實例 ）" >
                   <img  src="images/CSS3中text-overflow實作文章標題帶省略號的顯示效果（程式碼實例 ）" class="icon zanicon"/ alt="CSS3中text-overflow實作文章標題帶省略號的顯示效果（程式碼實例 ）" >
                   <span class="text">45</span>
               </li>
               <li class="liuyan">
                <img  src="images/CSS3中text-overflow實作文章標題帶省略號的顯示效果（程式碼實例 ）" class="icon"/ alt="CSS3中text-overflow實作文章標題帶省略號的顯示效果（程式碼實例 ）" >
                <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/CSS3中text-overflow實作文章標題帶省略號的顯示效果（程式碼實例 ）" class="icon fireicon"/ alt="CSS3中text-overflow實作文章標題帶省略號的顯示效果（程式碼實例 ）" >
                   <img  src="images/CSS3中text-overflow實作文章標題帶省略號的顯示效果（程式碼實例 ）" class="icon zanicon"/ alt="CSS3中text-overflow實作文章標題帶省略號的顯示效果（程式碼實例 ）" >
                   <span class="text">45</span>
               </li>
               <li class="liuyan">
                <img  src="images/CSS3中text-overflow實作文章標題帶省略號的顯示效果（程式碼實例 ）" class="icon"/ alt="CSS3中text-overflow實作文章標題帶省略號的顯示效果（程式碼實例 ）" >
                <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實作文章標題帶省略號的顯示效果（程式碼實例）