flexboxから長い文字列がはみ出さないようにする方法

7728 ワード
flexbox HTML CSS CSS3 HTML5 HTML テキストリンク

flexboxが便利だと聞いたので使っていたら、boxの内に要素がおさまらなくて
色々と試していたら案外簡単に解決したのでメモ。

文章がはみ出る

赤い枠内におさまっていない。bbbbbがちょっと出ちゃってる。

コード

html
    <div class="flexbox">
        <div class="f-item1">URL:</div>
        <div class="f-item2"><a href="#">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaabbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</a></div>
    </div>
css
    .flexbox {
        display: -webkit-flex; /* Safari */
        display: flex;
        -webkit-flex-wrap: wrap; /* Safari */
        flex-wrap: wrap;
        width: 80%;
        padding-bottom: 6px;
        border:1px solid red;
    }

    .f-item1 {
        text-align: left;
        width: 100%;
    }

    .f-item2 {
        text-align: left;
        width: 100%;
    }

はみ出ないようにする

枠の横幅いっぱいのところで折り返して、きちんと赤枠内におさまってる！

コード

html
    <div class="flexbox">
        <div class="f-item1">URL:</div>
        <div class="f-item2"><a href="#" class="word-break">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaabbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</a></div>
    </div>
css
    .flexbox {
        display: -webkit-flex; /* Safari */
        display: flex;
        -webkit-flex-wrap: wrap; /* Safari */
        flex-wrap: wrap;
        width: 80%;
        padding-bottom: 6px;
        border:1px solid red;
    }

    .f-item1 {
        text-align: left;
        width: 100%;
    }

    .f-item2 {
        text-align: left;
        width: 100%;
    }

    .word-break {
        word-break: break-all;
    }

どうやったのか

幅の狭い領域で長い英単語や長いURLの途中で折り返しを制御できるCSSプロパティ「word-break」を使用して
aタグにクラス指定をしただけ。

因みに

f-item2のクラスに対してwidthを調整してあげると、折り返す位置も調整できる。

width: 100 % ↓　　

width: 70 % ↓　　

css
    .f-item2 {
        text-align: left;
        width: 70%; //ここを調整。
    }