CSS文本超出宽度显示省略号，点击展开全部则显示全部，收起

最新推荐文章于 2024-09-19 08:00:00 发布

红色的苏里南苦樱桃

最新推荐文章于 2024-09-19 08:00:00 发布

阅读量9.3k

点赞数 6

分类专栏： CSS 文章标签： html css js

本文链接：https://blog.csdn.net/weixin_44962808/article/details/103794621

版权

CSS 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

当文本内容字数过多时，用户控制文本内容的展示、收起。恰巧在项目中遇见，因此就有了这个功能的简单实现

一、超出文本只显示省略号
HTML代码：

    <div id="text">这里就是一个标签，里面的内容全是乱写的，也不知道怎么写</div>

CSS代码：

//一行文本超出宽度显示省略号
#text{
    width: 50px; /* 容器宽度 */
    white-space: nowrap; /* 文本不换行 */
    overflow: hidden; /* 内容会被修剪，并且超过设置宽度的内容是不可见的 */
    text-overflow: ellipsis;/*显示省略符号来代表被修剪的文本*/
}
//超出2行文本显示省略号
 //width: 280rpx;   //自己定宽度
  //white-space: nowrap;  //需要注释掉
  overflow: hidden; //超出隐藏
  text-overflow: ellipsis;  //文本超出，用ellipsis省略号
  //显示多行
   display: -webkit-box;/* 弹性盒模型 */
   -webkit-box-orient: vertical;/* 元素垂直居中*/
   -webkit-line-clamp: 2;/*  文字显示的行数*/

white-space 属性：请参考点击这里
overflow 属性：请参考点击这里
text-overflow 属性：请参考点击这里

二、内容展开全部、收起
HTML代码：

<div>
        <p id="content">这个时间里的小草是最硕大最柔软的新床，诱惑着我们把自己的身躯无比舒坦地交给她们，没有了焦虑，没有了烦恼，在青草的簇拥下，做一个最轻松的美梦。</p>
        <p id="openBtn">展开全部</p>
    </div>

JS代码：

<script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
<script>
    //定义函数 $ 根据元素id获得页面元素,提高效率
    function $(id){
        return document.getElementById(id);
    }
    // 立即执行函数，判断文本长度是否过长
    (function(){
        var conText = $('content').innerText
        if(conText.length >= 20){
            $('content').style.cssText = "width: 400px;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;"
        }
    })()
    //点击事件，控制内容显示、收起
    $('openBtn').onclick=function(){
        let text = $('openBtn').innerText;
        if(text == '展开全部'){
            $('content').style.cssText = "color:chartreuse";
            $('openBtn').innerHTML = '收起'
        }
        if(text == '收起'){
            $('content').style.cssText = "width: 400px;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;";
            $('openBtn').innerHTML = '展开全部'
        }
    }
</script>

OK！！以上就是一些简单的实现。