• <menu id="ecaea"><center id="ecaea"></center></menu>
    <blockquote id="ecaea"><center id="ecaea"></center></blockquote>
  • 專注搜索競價代運營

    成長之選 ,效果之道!

    免費咨詢熱線:17636682598

    css溢出部分隱藏顯示滾動條

    css文本溢出處理辦法,超出部分隱藏內容顯示滾動條顯示剩余內容或者不顯示滾動條,超出部分直接隱藏不顯示

    overflow: hidden使用比較多在使用時,經常會出現隱藏半個字符

    overflow: hidden使用比較多在使用時,經常會出現隱藏半個字符,下圖就出現字符顯示不完整,影響用戶體驗

    解決辦法:
    控制行高來實現,通過查看父元素的高度。設置合理的行高,來實現字符顯示不全的情況

    1. <!DOCTYPE html> 
    2. <html> 
    3.     <head> 
    4.         <meta charset="utf-8"
    5.         <meta name="viewport" content="width=device-width, initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=yes"
    6.         <title>通高科技</title> 
    7.         <style> 
    8.             div { 
    9.               background-color: #eee; 
    10.               width: 200px; 
    11.               height: 50px; 
    12.               border: 1px dotted black; 
    13.               overflow: visible; 
    14.               margin-left: 40px; 
    15.               float: left; 
    16.              
    17.             } 
    18.             .div1{ 
    19.                 overflow: hidden; 
    20.                 line-height: 25px;/* 行高 */ 
    21.             } 
    22.              
    23.              
    24.         </style> 
    25.     </head> 
    26.     <body> 
    27.             <div class="div1">當您想更好地控制布局時,可以使用 overflow 屬性。overflow 屬性規定如果內容溢出元素框會發生什么情況。overflow: hidden超出隱藏不顯示</div> 
    28.  
    29.     </body> 
    30. </html> 

    Overflow屬性控制超出文本顯示隱藏

    CSS Overflow 屬性指定在元素的內容太大而無法放入指定區域時是剪裁內容還是添加滾動條。

    overflow 屬性可設置以下值:

    visible - 默認。溢出沒有被剪裁。內容在元素框外渲染

    hidden - 溢出被剪裁,其余內容將不可見

    scroll - 溢出被剪裁,同時添加滾動條以查看其余內容

    auto - 與 scroll 類似,但僅在必要時添加滾動條

    PS:overflow 屬性僅適用于具有指定高度的塊元素。也就說必須設置高度

    1. <!DOCTYPE html> 
    2. <html> 
    3.     <head> 
    4.         <meta charset="utf-8"
    5.         <meta name="viewport" content="width=device-width, initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=yes"
    6.         <title>通高科技</title> 
    7.         <style> 
    8.             div { 
    9.               background-color: #eee; 
    10.               width: 200px; 
    11.               height: 50px; 
    12.               border: 1px dotted black; 
    13.               overflow: visible; 
    14.               margin-left: 40px; 
    15.               float: left; 
    16.              
    17.             } 
    18.             .div1{ 
    19.                 overflow: hidden; 
    20.             } 
    21.             .div2{ 
    22.                 overflow: scroll; 
    23.             } 
    24.             .div3{ 
    25.                 overflow: auto; 
    26.             } 
    27.         </style> 
    28.     </head> 
    29.     <body> 
    30.          
    31.             <div>默認情況下,溢出是可見的,這意味著它不會被裁剪,而是在元素框外渲染: overflow: visible;</div> 
    32.             <div class="div1">當您想更好地控制布局時,可以使用 overflow 屬性。overflow 屬性規定如果內容溢出元素框會發生什么情況。overflow: hidden超出隱藏不顯示</div> 
    33.             <div class="div2">當您想更好地控制布局時,可以使用 overflow 屬性。overflow 屬性規定如果內容溢出元素框會發生什么情況。overflow: scroll超出加滾動條以查看其余內容</div> 
    34.             <div class="div2">當您想更好地控制布局時,可以使用 overflow 屬性。overflow 屬性規定如果內容溢出元素框會發生什么情況。overflow: auto超出加滾動條以查看其余內容,沒有超出不顯示滾動</div> 
    35.             <div class="div2">沒有超出不顯示滾動</div> 
    36.          
    37.          
    38.     </body> 
    39. </html> 

    本文分類:營銷學院

    瀏覽次數:57次瀏覽

    發布日期:2022-07-05 15:22:05

    本文鏈接:http://www.backlinkboom.com/edu/2419.html

    天美传媒精品,亚洲国际综合无码一区,液液酱cosplay露出
  • <menu id="ecaea"><center id="ecaea"></center></menu>
    <blockquote id="ecaea"><center id="ecaea"></center></blockquote>