CSS3中text-overflow实现文章标题带省略号的显示效果（代码实例）-tutorial css-php.cn

Rumah

hujung hadapan web

tutorial css

CSS3中text-overflow实现文章标题带省略号的显示效果（代码实例）

易达

Jun 05, 2020 pm 04:01 PM

css3text-overflow

本文目标：

1、掌握文本带省略号的显示效果

问题：

1、实现以下效果，要求使用纯DIV+CSS，不适用任何框架

实现效果图.png

附加说明

1、总体宽度是500px,在页面中居中显示

2、标题字体大小是22px,其他字体是16px

3、超级开心果作者的名称靠最左，时间2天前显示靠最右、

4、所有的小图标都是20px大小显示

5、标题全文是：路遥《平凡的世界》，激励了无数的青年，鼓舞了无数人的心

现在来具体操作

1、准备素材：根目录创建images文件夹，把相关素材图片都存放与此，素材有

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/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>

运行效果如下：

到此为止，我们就实现了全部的需求

总结：

1、学习了如何让文本带省略号显示，主要代码如下：

text-overflow:ellipsis;

overflow:hidden;

white-space:nowrap;

希望本文能给大家带来一定的帮助，谢谢！！！

Atas ialah kandungan terperinci CSS3中text-overflow实现文章标题带省略号的显示效果（代码实例）. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel Berkaitan

Di manakah 'Langgan Podcast' pautan ke?Apr 16, 2025 pm 12:04 PM

Untuk sementara waktu, iTunes adalah anjing besar dalam podcasting, jadi jika anda mengaitkan "Langgan Podcast" untuk suka:

Kepelbagaian enjin pelayarApr 16, 2025 pm 12:02 PM

Kami kehilangan opera ketika mereka pergi Chrome pada tahun 2013. Sama dengan Edge ketika ia juga menjadi Chrome awal tahun ini. Mike Taylor memanggil perubahan ini "menurun

Pertimbangan UX untuk Perkongsian WebApr 16, 2025 am 11:59 AM

Dari laman web Trashy Clickbait hingga paling banyak penerbitan, butang saham telah lama di mana -mana di seluruh web. Namun ia boleh dikatakan bahawa ini

Berita Platform Mingguan: Apple Menggunakan Komponen Web, Rendering HTML Progresif, Sumber Kritikal SendiriApr 16, 2025 am 11:55 AM

Dalam roundup minggu ini, Apple masuk ke dalam komponen web, bagaimana Instagram adalah skrip insta-loading, dan beberapa makanan untuk difikirkan untuk sumber kritikal sendiri.

Pathspec git dan cara menggunakannyaApr 16, 2025 am 11:53 AM

Apabila saya melihat melalui dokumentasi arahan git, saya perhatikan bahawa banyak daripada mereka mempunyai pilihan untuk. Saya pada mulanya berpendapat bahawa ini hanya

Pemetik warna untuk gambar produkApr 16, 2025 am 11:49 AM

Bunyi seperti masalah yang sukar tidak? Kami sering tidak mempunyai tembakan produk dalam beribu -ribu warna, supaya kita dapat membalikkannya. Kami juga tidak

Mod gelap bertukar -tukar dengan reaksi dan temaApr 16, 2025 am 11:46 AM

Saya suka apabila laman web mempunyai pilihan mod gelap. Mod gelap menjadikan laman web lebih mudah bagi saya untuk membaca dan membantu mata saya berasa lebih santai. Banyak laman web, termasuk

Beberapa tangan dengan elemen dialog HTMLApr 16, 2025 am 11:33 AM

Ini saya melihat elemen HTML untuk kali pertama. Saya telah menyedarinya untuk seketika, tetapi Haven ' t mengambilnya untuk putaran lagi. Ia mempunyai cukup keren dan

See all articles