资讯专栏INFORMATION COLUMN

上云采购季！| 2核2G4M爆款云服务器低至59元/年，更有多台、长期优惠，快来选购！

立即前往
首页/文章专栏/解决一行文本溢出隐藏点击展开之后全部显示并自动换行每行长度一致问题

解决一行文本溢出隐藏点击展开之后全部显示并自动换行每行长度一致问题

Channe / 2802人阅读

摘要：一行数据文本内容太多，把页面撑得很长影响美观。该方法可以实现当一行文本内容超过固定长度后，收缩起来，显示一个展开按钮，用户一点击后就显示全部内容。

一行数据文本内容太多，把页面撑得很长影响美观。该方法可以实现当一行文本内容超过固定长度后，收缩起来，显示一个“展开”按钮，用户一点击后就显示全部内容。当然多行文本也同样适用，（若是全部是中文也可以使用判断判断字符串长度的方法，中文占用两个字符，但是若文章中含有英文就不适合了，因为字母i所占用的长度非常短一个汉字所占用的字符多余2个i，就会出现长短不一的情况；)本文所展示方法解决了这个问题。

HTML 

    

        first my gaze toward the moon, but the moon shines on the ditch. “我本一心向明月，奈何明月照沟渠”
    

    
        展开
    
    
        收起
css 
#content{
   width: 150px;
   height: 25px; 
   float:left;
   overflow: auto;
   word-wrap:break-word;
   word-break: break-all;
   text-overflow:ellipsis;
   white-space:nowrap;     
}
a{
   float:right;
   margin-left: 30px;
   position: absolute;
   top: 0;
   right: 0;
}
#pack{
   display: none;
}
JS 
window.onload=function(){
    // element.scrollHeight---文章内容的实际高度   element.clientHeight---文章内容的显示高度
    // element.scrollWidth---文章内容的实际宽度   element.clientWidth ---文章内容的显示宽度
    var element=document.getElementById("content")
    if(element.scrollHeight>element.clientHeight){
        element.style="overflow:hidden;"
    }else{
        document.getElementById("expand").style="display:none"
    }
    
}
function more(){
    document.getElementById("content").style="overflow:visible; white-space:normal;"
    document.getElementById("expand").style="display:none"
    document.getElementById("pack").style="display:block"
 }
 function pack(){
    document.getElementById("content").style="display:block;overflow:hidden"
    document.getElementById("expand").style="display:block"
    document.getElementById("pack").style="display:none"
}
GPU云服务器 云服务器 html点击展开隐藏 html显示文本换行 点击显示隐藏文件 js隐藏点击显示出来

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/91961.html

相关文章

  • 解决一行文本溢出隐藏点击展开之后全部显示并自动换行每行长度一致问题

    摘要：一行数据文本内容太多，把页面撑得很长影响美观。该方法可以实现当一行文本内容超过固定长度后，收缩起来，显示一个展开按钮，用户一点击后就显示全部内容。 一行数据文本内容太多，把页面撑得很长影响美观。该方法可以实现当一行文本内容超过固定长度后，收缩起来，显示一个展开按钮，用户一点击后就显示全部内容。当然多行文本也同样适用，（若是全部是中文也可以使用判断判断字符串长度的方法，中文占用两个字符，...

    rollback 评论0 收藏0

  • 解决一行文本溢出隐藏点击展开之后全部显示并自动换行每行长度一致问题

    摘要：一行数据文本内容太多，把页面撑得很长影响美观。该方法可以实现当一行文本内容超过固定长度后，收缩起来，显示一个展开按钮，用户一点击后就显示全部内容。 一行数据文本内容太多，把页面撑得很长影响美观。该方法可以实现当一行文本内容超过固定长度后，收缩起来，显示一个展开按钮，用户一点击后就显示全部内容。当然多行文本也同样适用，（若是全部是中文也可以使用判断判断字符串长度的方法，中文占用两个字符，...

    Luosunce 评论0 收藏0

  • 《css世界》- 详细重点笔记与技巧

    摘要：概述在世界这本书中有一些黑魔法给列举出来，在结合自己的理解。篇幅有点长，希望大家能够坚持看完，一定会有收获以下是摘自每章内一些重要的概念与技巧。 概述 在《css世界》这本书中有一些黑魔法给列举出来，在结合自己的理解。篇幅有点长，希望大家能够坚持看完，一定会有收获！！！以下是摘自每章内一些重要的概念与技巧。其中有解决图片间隙的问题、小图标与文字居中问题等; ps: 特别是 line-h...

    MasonEast 评论0 收藏0

  • 《css世界》- 详细重点笔记与技巧

    摘要：概述在世界这本书中有一些黑魔法给列举出来，在结合自己的理解。篇幅有点长，希望大家能够坚持看完，一定会有收获以下是摘自每章内一些重要的概念与技巧。 概述 在《css世界》这本书中有一些黑魔法给列举出来，在结合自己的理解。篇幅有点长，希望大家能够坚持看完，一定会有收获！！！以下是摘自每章内一些重要的概念与技巧。其中有解决图片间隙的问题、小图标与文字居中问题等; ps: 特别是 line-h...

    赵连江 评论0 收藏0

发表评论

登陆后可评论

0条评论

Channe

男|高级讲师
我要私信

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<