溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務條款》

CSS3中text-overflow的使用方法

發(fā)布時間：2020-06-09 11:37:11 來源：億速云 閱讀：315 作者：Leah 欄目：web開發(fā)

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

問題：

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

CSS3中text-overflow的使用方法

附加說明

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

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

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

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

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

現(xiàn)在來具體操作

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文本帶省略號實現(xiàn)案例</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文本帶省略號實現(xiàn)案例</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的使用方法

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

總結：

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

text-overflow:ellipsis;

overflow:hidden;

white-space:nowrap;

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

向AI問一下細節(jié)

免責聲明：本站發(fā)布的內容（圖片、視頻和文字）以原創(chuàng)、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯(lián)系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。

AI
助
手