摘要:一行数据文本内容太多,把页面撑得很长影响美观。该方法可以实现当一行文本内容超过固定长度后,收缩起来,显示一个展开按钮,用户一点击后就显示全部内容。
一行数据文本内容太多,把页面撑得很长影响美观。该方法可以实现当一行文本内容超过固定长度后,收缩起来,显示一个“展开”按钮,用户一点击后就显示全部内容。当然多行文本也同样适用,(若是全部是中文也可以使用判断判断字符串长度的方法,中文占用两个字符,但是若文章中含有英文就不适合了,因为字母i所占用的长度非常短一个汉字所占用的字符多余2个i,就会出现长短不一的情况;)本文所展示方法解决了这个问题。
HTMLcss
#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" }
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/51291.html
摘要:一行数据文本内容太多,把页面撑得很长影响美观。该方法可以实现当一行文本内容超过固定长度后,收缩起来,显示一个展开按钮,用户一点击后就显示全部内容。 一行数据文本内容太多,把页面撑得很长影响美观。该方法可以实现当一行文本内容超过固定长度后,收缩起来,显示一个展开按钮,用户一点击后就显示全部内容。当然多行文本也同样适用,(若是全部是中文也可以使用判断判断字符串长度的方法,中文占用两个字符,...
摘要:一行数据文本内容太多,把页面撑得很长影响美观。该方法可以实现当一行文本内容超过固定长度后,收缩起来,显示一个展开按钮,用户一点击后就显示全部内容。 一行数据文本内容太多,把页面撑得很长影响美观。该方法可以实现当一行文本内容超过固定长度后,收缩起来,显示一个展开按钮,用户一点击后就显示全部内容。当然多行文本也同样适用,(若是全部是中文也可以使用判断判断字符串长度的方法,中文占用两个字符,...
摘要:概述在世界这本书中有一些黑魔法给列举出来,在结合自己的理解。篇幅有点长,希望大家能够坚持看完,一定会有收获以下是摘自每章内一些重要的概念与技巧。 概述 在《css世界》这本书中有一些黑魔法给列举出来,在结合自己的理解。篇幅有点长,希望大家能够坚持看完,一定会有收获!!!以下是摘自每章内一些重要的概念与技巧。其中有解决图片间隙的问题、小图标与文字居中问题等; ps: 特别是 line-h...
摘要:概述在世界这本书中有一些黑魔法给列举出来,在结合自己的理解。篇幅有点长,希望大家能够坚持看完,一定会有收获以下是摘自每章内一些重要的概念与技巧。 概述 在《css世界》这本书中有一些黑魔法给列举出来,在结合自己的理解。篇幅有点长,希望大家能够坚持看完,一定会有收获!!!以下是摘自每章内一些重要的概念与技巧。其中有解决图片间隙的问题、小图标与文字居中问题等; ps: 特别是 line-h...
阅读 2906·2020-01-08 12:17
阅读 1957·2019-08-30 15:54
阅读 1121·2019-08-30 15:52
阅读 1996·2019-08-29 17:18
阅读 1008·2019-08-29 15:34
阅读 2422·2019-08-27 10:58
阅读 1837·2019-08-26 12:24
阅读 341·2019-08-23 18:23