天天看點
傳回

從零開始前端學習[17]:overflow超出是否隐藏的使用方式

overflow超出是否隐藏的使用方式

  • overflow屬性及屬性值的使用
  • 單方向屬性:overflow-x
  • 單方向屬性:overflow-y

提示

部落客：章飛_906285288

部落格位址:http://blog.csdn.net/qq_29924041

overflow超出是否隐藏的使用方式

overflow故名思議：也就是超出隐藏的意思，即盒子的大小如果不能容納指定内容的時候，這個時候是選擇超出，還是顯示；

其有3個屬性值

overflow:hidden;//超出隐藏
overflow:scroll;//無論是否超出，x，y軸都是會出現滾動條的
overflow:auto;//當内容超出的時候，這個時候顯示滾動條，如果内容沒有超出，那麼則不處理
           
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <meta charset="UTF-8"><!--申明目前網頁的編碼集UTF-8-->
  <meta name="Generator" content="EditPlus®">   <!--編輯器的名稱-->
  <meta name="Author" content="作者是誰">       
  <meta name="Keywords" content="關鍵詞">
  <meta name="Description" content="描述和簡介">
  <style type="text/css">                                        
        body,dl,dd,dt,p,h1,h2,h3,h4,h5,h6{ margin: ;}
        ul,ol{margin: ; list-style: none; padding: ;}
        a{ text-decoration: none; }
        *{ margin: ; padding: ; }
        p{width: px;height: px;margin: px;border: px solid green}
        .main{width: px;margin: px auto;box-shadow: px px px px deeppink;
        }
        .main .hidden{overflow: hidden}
        .main .scroll{overflow: scroll}
        .main .auto_1{overflow: auto}
        .main .auto_2{overflow: auto}
        .main .text_overflow{overflow: hidden;white-space: nowrap;text;text-overflow: ellipsis}
  </style>
</head>
<body>
  <div class="main">
      <p class="hidden">
        呼喊是爆發的沉默
        沉默是無聲的召喚
        不論激越
        還是甯靜
        我祈求
        隻要不是平淡
        如果遠方呼喊我
        我就走向遠方
        如果大山召喚我
        我就走向大山
        雙腳磨破
        幹脆再讓夕陽塗抹小路
        雙手劃爛
        索性就讓荊棘變成杜鵑
        沒有比腳更長的路
        沒有比人更高的山 </p>
      <p class="scroll">
        呼喊是爆發的沉默
        沉默是無聲的召喚
        不論激越
        還是甯靜
        我祈求
        隻要不是平淡
        如果遠方呼喊我
        我就走向遠方
        如果大山召喚我
        我就走向大山
        雙腳磨破
        幹脆再讓夕陽塗抹小路
        雙手劃爛
        索性就讓荊棘變成杜鵑
        沒有比腳更長的路
        沒有比人更高的山</p>
      <p class="auto_1"> 呼喊是爆發的沉默
        沉默是無聲的召喚
        不論激越
        還是甯靜
        我祈求
        隻要不是平淡
        如果遠方呼喊我
        我就走向遠方
        如果大山召喚我
        我就走向大山
        雙腳磨破
        幹脆再讓夕陽塗抹小路
        雙手劃爛
        索性就讓荊棘變成杜鵑
        沒有比腳更長的路
        沒有比人更高的山</p>
      <p class="auto_2">
        沒有比腳更長的路
        沒有比人更高的山</p>
      <p class="text_overflow">
        呼喊是爆發的沉默
        沉默是無聲的召喚
        不論激越
        還是甯靜
        我祈求
        隻要不是平淡
        如果遠方呼喊我
        我就走向遠方
        如果大山召喚我
        我就走向大山
        雙腳磨破
        幹脆再讓夕陽塗抹小路
        雙手劃爛
        索性就讓荊棘變成杜鵑
        沒有比腳更長的路
        沒有比人更高的山</p>
  </div>
</body>
</html>

顯示的效果如下所示:

從零開始前端學習[17]:overflow超出是否隐藏的使用方式

hidden 第一個預設是超出隐藏的

scroll 第二個是加了滾動條的

auto 第三個因為是超出，是以也加了滾動條的

auto 第四個因為沒有超出，是以沒有滾動條

第五個就是之前說的，文本區域超出之後顯示…的形式

單方向屬性:overflow-x

overflow-x指的是在x軸方向上面的超出屬性。注意，一定需要與 white-space: nowrap;不換行屬性進行連用

overflow-x: hidden;  //x軸方向上隐藏
overflow-x: scroll;  //x軸方向上顯示滾動條
overflow-x: auto;    //x方向上随機
           
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <meta charset="UTF-8"><!--申明目前網頁的編碼集UTF-8-->
  <meta name="Generator" content="EditPlus®">   <!--編輯器的名稱-->
  <meta name="Author" content="作者是誰">
  <meta name="Keywords" content="關鍵詞">
  <meta name="Description" content="描述和簡介">
  <style type="text/css">
    body,dl,dd,dt,p,h1,h2,h3,h4,h5,h6{ margin: ;}
    ul,ol{margin: ; list-style: none; padding: ;}
    a{ text-decoration: none; }
    *{ margin: ; padding: ; }
    p{width: px;height: px;margin: px;border: px solid green}
    .main{width: px;margin: px auto;box-shadow: px px px px deeppink;white-space: nowrap;
    }
    .main .hidden{overflow-x: hidden}
    .main .scroll{overflow-x: scroll}
    .main .auto_1{overflow-x: auto}
    .main .auto_2{overflow-x: auto}
    .main .text_overflow{overflow-x: hidden;white-space: nowrap;text-overflow: ellipsis}
  </style>
</head>
<body>
<div class="main">
  <p class="hidden">
    呼喊是爆發的沉默
    沉默是無聲的召喚
    不論激越
    還是甯靜
    我祈求
    隻要不是平淡
    如果遠方呼喊我
    我就走向遠方
    如果大山召喚我
    我就走向大山
    雙腳磨破
    幹脆再讓夕陽塗抹小路
    雙手劃爛
    索性就讓荊棘變成杜鵑
    沒有比腳更長的路
    沒有比人更高的山 </p>
  <p class="scroll">
    呼喊是爆發的沉默
    沉默是無聲的召喚
    不論激越
    還是甯靜
    我祈求
    隻要不是平淡
    如果遠方呼喊我
    我就走向遠方
    如果大山召喚我
    我就走向大山
    雙腳磨破
    幹脆再讓夕陽塗抹小路
    雙手劃爛
    索性就讓荊棘變成杜鵑
    沒有比腳更長的路
    沒有比人更高的山</p>
  <p class="auto_1"> 呼喊是爆發的沉默
    沉默是無聲的召喚
    不論激越
    還是甯靜
    我祈求
    隻要不是平淡
    如果遠方呼喊我
    我就走向遠方
    如果大山召喚我
    我就走向大山
    雙腳磨破
    幹脆再讓夕陽塗抹小路
    雙手劃爛
    索性就讓荊棘變成杜鵑
    沒有比腳更長的路
    沒有比人更高的山</p>
  <p class="auto_2">
    沒有比腳更長的路
    沒有比人更高的山</p>
  <p class="text_overflow">
    呼喊是爆發的沉默
    沉默是無聲的召喚
    不論激越
    還是甯靜
    我祈求
    隻要不是平淡
    如果遠方呼喊我
    我就走向遠方
    如果大山召喚我
    我就走向大山
    雙腳磨破
    幹脆再讓夕陽塗抹小路
    雙手劃爛
    索性就讓荊棘變成杜鵑
    沒有比腳更長的路
    沒有比人更高的山</p>
</div>
</body>
</html>

顯示效果如下所示:

從零開始前端學習[17]:overflow超出是否隐藏的使用方式

可以看到其主要是在x軸上進行活動操作的

單方向屬性:overflow-y

overflow-y指的是在x軸方向上面的超出屬性。

overflow-y: hidden;  //y軸方向上隐藏
overflow-y: scroll;  //y軸方向上顯示滾動條
overflow-y: auto;    //y方向上随機
           
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <meta charset="UTF-8"><!--申明目前網頁的編碼集UTF-8-->
  <meta name="Generator" content="EditPlus®">   <!--編輯器的名稱-->
  <meta name="Author" content="作者是誰">
  <meta name="Keywords" content="關鍵詞">
  <meta name="Description" content="描述和簡介">
  <style type="text/css">
    body,dl,dd,dt,p,h1,h2,h3,h4,h5,h6{ margin: ;}
    ul,ol{margin: ; list-style: none; padding: ;}
    a{ text-decoration: none; }
    *{ margin: ; padding: ; }
    p{width: px;height: px;margin: px;border: px solid green}
    .main{width: px;margin: px auto;box-shadow: px px px px deeppink;
    }
    .main .hidden{overflow-y: hidden}
    .main .scroll{overflow-y: scroll}
    .main .auto_1{overflow-y: auto}
    .main .auto_2{overflow-y: auto}
  </style>
</head>
<body>
<div class="main">
  <p class="hidden">
    呼喊是爆發的沉默
    沉默是無聲的召喚
    不論激越
    還是甯靜
    我祈求
    隻要不是平淡
    如果遠方呼喊我
    我就走向遠方
    如果大山召喚我
    我就走向大山
    雙腳磨破
    幹脆再讓夕陽塗抹小路
    雙手劃爛
    索性就讓荊棘變成杜鵑
    沒有比腳更長的路
    沒有比人更高的山 </p>
  <p class="scroll">
    呼喊是爆發的沉默
    沉默是無聲的召喚
    不論激越
    還是甯靜
    我祈求
    隻要不是平淡
    如果遠方呼喊我
    我就走向遠方
    如果大山召喚我
    我就走向大山
    雙腳磨破
    幹脆再讓夕陽塗抹小路
    雙手劃爛
    索性就讓荊棘變成杜鵑
    沒有比腳更長的路
    沒有比人更高的山</p>
  <p class="auto_1"> 呼喊是爆發的沉默
    沉默是無聲的召喚
    不論激越
    還是甯靜
    我祈求
    隻要不是平淡
    如果遠方呼喊我
    我就走向遠方
    如果大山召喚我
    我就走向大山
    雙腳磨破
    幹脆再讓夕陽塗抹小路
    雙手劃爛
    索性就讓荊棘變成杜鵑
    沒有比腳更長的路
    沒有比人更高的山</p>
  <p class="auto_2">
    沒有比腳更長的路
    沒有比人更高的山</p>
  <p class="text_overflow">
    呼喊是爆發的沉默
    沉默是無聲的召喚
    不論激越
    還是甯靜
    我祈求
    隻要不是平淡
    如果遠方呼喊我
    我就走向遠方
    如果大山召喚我
    我就走向大山
    雙腳磨破
    幹脆再讓夕陽塗抹小路
    雙手劃爛
    索性就讓荊棘變成杜鵑
    沒有比腳更長的路
    沒有比人更高的山</p>
</div>
</body>
</html>

顯示效果如下所示:

從零開始前端學習[17]:overflow超出是否隐藏的使用方式

從上述可以看到，其主要的溢出方向是y軸的方向，并且如果沒有設定overflow系列屬性的時候，這個時候的内容顯示就超出了盒子的空間。

歡迎持續通路部落格

# 1.從零開始挑戰前端 overflow overflow-x overflow-y 文本超出隐藏
上一篇: 從零開始前端學習[19]:前端中重要的屬性，定位position屬性
下一篇: 從零開始前端學習[16]:box-shadow陰影屬性的使用

繼續閱讀