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

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

一、超出文本只显示省略号
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!!以上就是一些简单的实现。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值