HTML技巧篇：如何让单行文本以及多行文本溢出显示省略号(…)

最新推荐文章于 2024-08-05 22:35:13 发布

. DEMO

最新推荐文章于 2024-08-05 22:35:13 发布

阅读量2.1k

点赞数 4

分类专栏： html 文章标签： html css css3

本文链接：https://blog.csdn.net/qq_47160806/article/details/121896591

版权

html 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

文章目录

HTML技巧篇：如何让单行文本以及多行文本溢出显示省略号(…)
一、单行文本溢出显示省略号
- - 核心css语句：
二、多行文本溢出显示省略号
- - 核心css语句：
  - 效果图：
总结

HTML技巧篇：如何让单行文本以及多行文本溢出显示省略号(…)

本篇文章主要给大家介绍一下在html页面中如何让单行文本以及多行文本溢出显示省略号(…)。

提示：以下是本篇文章正文内容，下面案例可供参考

一、单行文本溢出显示省略号

当我们在编写网页代码的时候，肯定会遇到过文字列表中的文字太多超出了我们所写的宽度，导致文本换行或者文本超出了界限，这时有人就会说了，让后台限制一下调用的文字个数不就行了吗，但是我们在做响应式的时候由于是百分比布局，无法计算一行会显示多少个文字，所以这并不是一个好的解决方案，我们使用css3就可以轻松的实现，而且简单好用。

核心css语句：

1、overflow:hidden; （顾名思义超出限定的宽度就隐藏内容）

2、white-space: nowrap; （设置文字在一行显示不能换行）

3、text-overflow: ellipsis;（规定当文本溢出时显示省略符号来代表被修剪的文本）

单行文本溢出较简单，本文章中不列出具体代码，读者自行实验。

二、多行文本溢出显示省略号

我们在编写网页代码时，有时候新闻列表页中新闻简介可能有一行或者多行，我们要如何处理这种问题，让其超出多行后还能显示省略号呢，不要慌，我们css还是很强大的，已经给我们提供了方法来处理这种问题了。

核心css语句：

1、-webkit-line-clamp:2; （用来限制在一个块元素显示的文本的行数,2表示最多显示2行。为了实现该效果，它需要组合其他的WebKit属性）

2、display: -webkit-box; （和1结合使用，将对象作为弹性伸缩盒子模型显示）

3、-webkit-box-orient:vertical;（和1结合使用，设置或检索伸缩盒对象的子元素的排列方式。）

4、overflow:hidden; （顾名思义超出限定的宽度就隐藏内容）

5、text-overflow: ellipsis;（规定当文本溢出时显示省略符号来代表被修剪的文本）

我们具体的代码效果演示就如下图所示：（超出2行的文字内容让其自动隐藏并显示…，并用js控制展开与关闭）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="../jquery/jQuery.js"></script>
    <script src="../bootstrap/js/bootstrap.min.js"></script>
    <link href="../bootstrap/css/bootstrap.css" rel="stylesheet">
    <title>collapse</title>
    <style>
        /*  三行文字 省略号    */
        .lookmoretop{
            overflow : hidden;  
            text-overflow: ellipsis;  
            display: -webkit-box;  
            -webkit-line-clamp: 3;  
            -webkit-box-orient: vertical;  
            width: 300px;  
            margin-top: 20px;
            margin-left: 10px;
            padding: 10px;
            border-radius: 25px 25px  0px 0px;
            background-color: rgba(204, 204, 204, 0.3);
            height: 68px; 
        }
        /* 查看更多 */
        .lookmorebottom{
            display: block;
            border-radius: 0px 0px  25px 25px;
            background-color: rgba(204, 204, 204, 0.3);
            width: 320px; 
            padding: 10px;
            margin-left: 10px;
            text-align: center;
            color: rgba(14, 14, 212, 0.61) 
        }

    </style>
</head>
<body>
    <div class="lookmoretop"><b>琵琶行</b>         白居易 〔唐代〕<br/>

        元和十年，予左迁九江郡司马。明年秋，送客湓浦口，闻舟中夜弹琵琶者，听其音，铮铮然有京都声。问其人，本长安倡女，尝学琵琶于穆、曹二善才，年长色衰，委身为贾人妇。遂命酒，使快弹数曲。曲罢悯然，自叙少小时欢乐事，今漂沦憔悴，转徙于江湖间。予出官二年，恬然自安，感斯人言，是夕始觉有迁谪意。因为长句，歌以赠之，凡六百一十六言，命曰《琵琶行》。
        浔阳江头夜送客，枫叶荻花秋瑟瑟。
        主人下马客在船，举酒欲饮无管弦。
        醉不成欢惨将别，别时茫茫江浸月。
        忽闻水上琵琶声，主人忘归客不发。
        .........
        莫辞更坐弹一曲，为君翻作《琵琶行》。
        感我此言良久立，却坐促弦弦转急。
        凄凄不似向前声，满座重闻皆掩泣。
        座中泣下谁最多？江州司马青衫湿。
    </div>
    <a class="lookmorebottom">查看更多</a>
    <script>
        let btn=document.querySelector(".lookmorebottom");
        let content=document.querySelector(".lookmoretop")
        var collapse=1;
        btn.addEventListener("click",()=>{
            if(collapse==1){
                content.style.webkitLineClamp="100";
                content.style.height='100%';
                btn.innerHTML="收起";
            }else{
                content.style.webkitLineClamp="3";
                content.style.height='68px';
                btn.innerHTML="查看更多";
            }
            collapse=-collapse;
            
        })
    </script>
</body>
</html>

效果图：

在这里插入图片描述

总结

好了，本篇文章就给大家说到这里，大家自己下来可以自己找例子写一下试一试到底能不能实现我们所说的效果，以后在写页面的的遇到这种问题的时候直接复制使用即可。

. DEMO

关注

4
点赞
踩
5

收藏

觉得还不错? 一键收藏
1
评论
HTML技巧篇：如何让单行文本以及多行文本溢出显示省略号(…)

文章目录HTML技巧篇：如何让单行文本以及多行文本溢出显示省略号(…)一、单行文本溢出显示省略号核心css语句：二、多行文本溢出显示省略号核心css语句：效果图：总结HTML技巧篇：如何让单行文本以及多行文本溢出显示省略号(…)本篇文章主要给大家介绍一下在html页面中如何让单行文本以及多行文本溢出显示省略号(…)。提示：以下是本篇文章正文内容，下面案例可供参考一、单行文本溢出显示省略号当我们在编写网页代码的时候，肯定会遇到过文字列表中的文字太多超出了我们所写的宽度，导致文本换行或者文本超出了
复制链接

扫一扫

专栏目录