国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

解決一行文本溢出隱藏點擊展開之后全部顯示并自動換行每行長度一致問題

Luosunce / 1089人閱讀

摘要：一行數據文本內容太多，把頁面撐得很長影響美觀。該方法可以實現當一行文本內容超過固定長度后，收縮起來，顯示一個展開按鈕，用戶一點擊后就顯示全部內容。

一行數據文本內容太多，把頁面撐得很長影響美觀。該方法可以實現當一行文本內容超過固定長度后，收縮起來，顯示一個“展開”按鈕，用戶一點擊后就顯示全部內容。當然多行文本也同樣適用，（若是全部是中文也可以使用判斷判斷字符串長度的方法，中文占用兩個字符，但是若文章中含有英文就不適合了，因為字母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"
}

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/112613.html

相關文章

  • 解決一行文本溢出隱藏點擊展開之后全部顯示并自動換行每行長度一致問題

    摘要：一行數據文本內容太多，把頁面撐得很長影響美觀。該方法可以實現當一行文本內容超過固定長度后，收縮起來，顯示一個展開按鈕，用戶一點擊后就顯示全部內容。 一行數據文本內容太多，把頁面撐得很長影響美觀。該方法可以實現當一行文本內容超過固定長度后，收縮起來，顯示一個展開按鈕，用戶一點擊后就顯示全部內容。當然多行文本也同樣適用，（若是全部是中文也可以使用判斷判斷字符串長度的方法，中文占用兩個字符，...

    Channe 評論0 收藏0

  • 解決一行文本溢出隱藏點擊展開之后全部顯示并自動換行每行長度一致問題

    摘要：一行數據文本內容太多，把頁面撐得很長影響美觀。該方法可以實現當一行文本內容超過固定長度后，收縮起來，顯示一個展開按鈕，用戶一點擊后就顯示全部內容。 一行數據文本內容太多，把頁面撐得很長影響美觀。該方法可以實現當一行文本內容超過固定長度后，收縮起來，顯示一個展開按鈕，用戶一點擊后就顯示全部內容。當然多行文本也同樣適用，（若是全部是中文也可以使用判斷判斷字符串長度的方法，中文占用兩個字符，...

    rollback 評論0 收藏0

  • 《css世界》- 詳細重點筆記與技巧

    摘要：概述在世界這本書中有一些黑魔法給列舉出來，在結合自己的理解。篇幅有點長，希望大家能夠堅持看完，一定會有收獲以下是摘自每章內一些重要的概念與技巧。 概述 在《css世界》這本書中有一些黑魔法給列舉出來，在結合自己的理解。篇幅有點長，希望大家能夠堅持看完，一定會有收獲！！！以下是摘自每章內一些重要的概念與技巧。其中有解決圖片間隙的問題、小圖標與文字居中問題等; ps: 特別是 line-h...

    MasonEast 評論0 收藏0

  • 《css世界》- 詳細重點筆記與技巧

    摘要：概述在世界這本書中有一些黑魔法給列舉出來，在結合自己的理解。篇幅有點長，希望大家能夠堅持看完，一定會有收獲以下是摘自每章內一些重要的概念與技巧。 概述 在《css世界》這本書中有一些黑魔法給列舉出來，在結合自己的理解。篇幅有點長，希望大家能夠堅持看完，一定會有收獲！！！以下是摘自每章內一些重要的概念與技巧。其中有解決圖片間隙的問題、小圖標與文字居中問題等; ps: 特別是 line-h...

    趙連江 評論0 收藏0

發表評論

0條評論

最新活動
閱讀需要支付1元查看
<