未経験からエンジニア 奮闘記

未経験からエンジニアに自由に生きる途中

MENU

overflowの使い方

zoverflowとは

要素ボックスからはみ出た部分を扱うcss

英語でも見るとそのままですね。

値の種類

  • visible

    はみ出たまま

  • hidden はみ出た部分が隠れる

  • scroll はみ出た部分が隠れてスクロールできる
  • auto

    ブラウザーにより変動するラッシい

初期状態

横幅が50pxですが文字が溢れている状態

f:id:everydayProguramming:20200705140332p:plain

  • visible

これだと変わらない

.text{
    width: 50px;
    overflow: visible;
    background: skyblue;
}
  • hidden

はみ出た部分は隠れる

f:id:everydayProguramming:20200705140504p:plain

  • scroll

はみ出た部分をスクロールできる。 1から10の数字をスクロールできるようになった

f:id:everydayProguramming:20200705140654p:plain