資訊專欄INFORMATION COLUMN
摘要：一行數據文本內容太多，把頁面撐得很長影響美觀。該方法可以實現當一行文本內容超過固定長度后，收縮起來，顯示一個展開按鈕，用戶一點擊后就顯示全部內容。
一行數據文本內容太多，把頁面撐得很長影響美觀。該方法可以實現當一行文本內容超過固定長度后，收縮起來，顯示一個“展開”按鈕，用戶一點擊后就顯示全部內容。當然多行文本也同樣適用，（若是全部是中文也可以使用判斷判斷字符串長度的方法，中文占用兩個字符，但是若文章中含有英文就不適合了，因為字母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"
}
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/91961.html
摘要：一行數據文本內容太多，把頁面撐得很長影響美觀。該方法可以實現當一行文本內容超過固定長度后，收縮起來，顯示一個展開按鈕，用戶一點擊后就顯示全部內容。 一行數據文本內容太多，把頁面撐得很長影響美觀。該方法可以實現當一行文本內容超過固定長度后，收縮起來，顯示一個展開按鈕，用戶一點擊后就顯示全部內容。當然多行文本也同樣適用，（若是全部是中文也可以使用判斷判斷字符串長度的方法，中文占用兩個字符，...
摘要：一行數據文本內容太多，把頁面撐得很長影響美觀。該方法可以實現當一行文本內容超過固定長度后，收縮起來，顯示一個展開按鈕，用戶一點擊后就顯示全部內容。 一行數據文本內容太多，把頁面撐得很長影響美觀。該方法可以實現當一行文本內容超過固定長度后，收縮起來，顯示一個展開按鈕，用戶一點擊后就顯示全部內容。當然多行文本也同樣適用，（若是全部是中文也可以使用判斷判斷字符串長度的方法，中文占用兩個字符，...
摘要：概述在世界這本書中有一些黑魔法給列舉出來，在結合自己的理解。篇幅有點長，希望大家能夠堅持看完，一定會有收獲以下是摘自每章內一些重要的概念與技巧。 概述 在《css世界》這本書中有一些黑魔法給列舉出來，在結合自己的理解。篇幅有點長，希望大家能夠堅持看完，一定會有收獲！??！以下是摘自每章內一些重要的概念與技巧。其中有解決圖片間隙的問題、小圖標與文字居中問題等; ps: 特別是 line-h...
摘要：概述在世界這本書中有一些黑魔法給列舉出來，在結合自己的理解。篇幅有點長，希望大家能夠堅持看完，一定會有收獲以下是摘自每章內一些重要的概念與技巧。 概述 在《css世界》這本書中有一些黑魔法給列舉出來，在結合自己的理解。篇幅有點長，希望大家能夠堅持看完，一定會有收獲?。。∫韵率钦悦空聝纫恍┲匾母拍钆c技巧。其中有解決圖片間隙的問題、小圖標與文字居中問題等; ps: 特別是 line-h...
閱讀 2203·2021-10-18 13:28
閱讀 2512·2021-10-11 10:59
閱讀 2340·2019-08-29 15:06
閱讀 1132·2019-08-26 13:54
閱讀 808·2019-08-26 13:52
閱讀 3149·2019-08-26 12:02
閱讀 2999·2019-08-26 11:44
閱讀 2512·2019-08-26 10:56
