專注搜索競(jìng)價(jià)代運(yùn)營(yíng)

成長(zhǎng)之選 ，效果之道！

免費(fèi)咨詢熱線：17636682598

css溢出部分隱藏顯示滾動(dòng)條

css文本溢出處理辦法，超出部分隱藏內(nèi)容顯示滾動(dòng)條顯示剩余內(nèi)容或者不顯示滾動(dòng)條，超出部分直接隱藏不顯示

overflow: hidden使用比較多在使用時(shí)，經(jīng)常會(huì)出現(xiàn)隱藏半個(gè)字符

overflow: hidden使用比較多在使用時(shí)，經(jīng)常會(huì)出現(xiàn)隱藏半個(gè)字符，下圖就出現(xiàn)字符顯示不完整，影響用戶體驗(yàn)

解決辦法：
控制行高來(lái)實(shí)現(xiàn)，通過(guò)查看父元素的高度。設(shè)置合理的行高，來(lái)實(shí)現(xiàn)字符顯示不全的情況

  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">當(dāng)您想更好地控制布局時(shí)，可以使用 overflow 屬性。overflow 屬性規(guī)定如果內(nèi)容溢出元素框會(huì)發(fā)生什么情況。overflow: hidden超出隱藏不顯示</div> 
  28.  
  29.     </body> 
  30. </html> 

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

CSS Overflow 屬性指定在元素的內(nèi)容太大而無(wú)法放入指定區(qū)域時(shí)是剪裁內(nèi)容還是添加滾動(dòng)條。

overflow 屬性可設(shè)置以下值：

visible - 默認(rèn)。溢出沒(méi)有被剪裁。內(nèi)容在元素框外渲染

hidden - 溢出被剪裁，其余內(nèi)容將不可見(jiàn)

scroll - 溢出被剪裁，同時(shí)添加滾動(dòng)條以查看其余內(nèi)容

auto - 與 scroll 類似，但僅在必要時(shí)添加滾動(dòng)條

PS：overflow 屬性僅適用于具有指定高度的塊元素。也就說(shuō)必須設(shè)置高度

  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>默認(rèn)情況下，溢出是可見(jiàn)的，這意味著它不會(huì)被裁剪，而是在元素框外渲染： overflow: visible;</div> 
  32.             <div class="div1">當(dāng)您想更好地控制布局時(shí)，可以使用 overflow 屬性。overflow 屬性規(guī)定如果內(nèi)容溢出元素框會(huì)發(fā)生什么情況。overflow: hidden超出隱藏不顯示</div> 
  33.             <div class="div2">當(dāng)您想更好地控制布局時(shí)，可以使用 overflow 屬性。overflow 屬性規(guī)定如果內(nèi)容溢出元素框會(huì)發(fā)生什么情況。overflow: scroll超出加滾動(dòng)條以查看其余內(nèi)容</div> 
  34.             <div class="div2">當(dāng)您想更好地控制布局時(shí)，可以使用 overflow 屬性。overflow 屬性規(guī)定如果內(nèi)容溢出元素框會(huì)發(fā)生什么情況。overflow: auto超出加滾動(dòng)條以查看其余內(nèi)容,沒(méi)有超出不顯示滾動(dòng)</div> 
  35.             <div class="div2">沒(méi)有超出不顯示滾動(dòng)</div> 
  36.          
  37.          
  38.     </body> 
  39. </html> 

本文分類：營(yíng)銷學(xué)院

瀏覽次數(shù)：57次瀏覽

發(fā)布日期：2022-07-05 15:22:05

本文鏈接：http://www.ozone-depletion.net/edu/2419.html