解决一行文本溢出隐藏点击展开之后全部显示并自动换行每行长度一致问题
时间：2023-03-31 13:30:20
CSS
解决一行文字溢出隐藏，点击展开，全部显示并自动换行的问题。每行的长度是相同的。该方法可以实现当一行文本内容超过固定长度时，收缩显示一个“展开”按钮，用户点击后显示全部内容。当然，多行文字也是适用的，（如果全是中文，也可以用判断字符串长度的方法，中文占两个字符，但是如果文章中包含英文就不合适了，因为字母i占用的长度很短如果一个汉字占用的字符超过2个i，就会出现长短不一的情况；）本文给出的方法解决了这个问题。HTML首先我的目光投向了月亮，但是月亮照在沟里。"
展开折叠 css#content{width:150px;height:25px;float:left;overflow:auto;word-wrap:break-word;word-break:break-all;text-overflow:ellipsis;white-space:nowrap;{float:right;margin-left:30px;position:absolute;top:0;right:0;}#pack{display:none;}JSwindow.onload=function(){//element.scrollHeight---文章内容实际高度element.clientHeight---文章内容的显示高度//element.scrollWidth---文章内容的实际宽度element.clientWidth---文章内容的显示宽度varelement=document.getElementById("content")if(element.scrollHeight>element.clientHeight){element.style='overflow:hidden;'}else{文档ent.getElementById("expand").style="display:none"}}functionmore(){document.getElementById("content").style='overflow:visible;空白：正常；'document.getElementById("expand").style="display:none"document.getElementById("pack").style="display:block"}functionpack(){document.getElementById("content").style='显示：块；溢出：隐藏'document.getElementById("expand").style="display:block"document.getElementById("pack").style="display:none"}
