解決一行文字溢位隱藏點選展開之後全部顯示並自動換行每行長度一致問題

沐晴發表於2017-09-20

一行資料文字內容太多，把頁面撐得很長影響美觀。該方法可以實現當一行文字內容超過固定長度後，收縮起來，顯示一個“展開”按鈕，使用者一點選後就顯示全部內容。當然多行文字也同樣適用，（若是全部是中文也可以使用判斷判斷字串長度的方法，中文佔用兩個字元，但是若文章中含有英文就不適合了，因為字母i所佔用的長度非常短一個漢字所佔用的字元多餘2個i，就會出現長短不一的情況；)本文所展示方法解決了這個問題。

HTML

<div style="width: 250px; position: absolute;">
    <div id="content">
        first my gaze toward the moon, but the moon shines on the ditch. “我本一心向明月，奈何明月照溝渠”
    </div>
    <a Onclick=`more()` id=`expand`>
        展開
    </a>
    <a Onclick=`pack()` id="pack">
        收起
    </a>
</div>

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"
}

相關文章