CSS: 括弧を使うと勝手に改行される!? 文章の文字が微妙な位置で改行されるのを修正するよ!



  • csskaigyousinaide



csskaigyousinaide

タイトルや記事内で括弧を使うと勝手に改行される事はありますよね。その括弧を含め指定したWidthサイズとフォントのサイズ次第では文章の途中でも文字が微妙な位置で改行されちゃいズレてしまいます。そんな時はword-breakを使うと修正できますよ!という事でword-breakの使い方をご紹介します。

  • word-break について
    word-break の特徴

    ■ word-break: normal;
    normalを指定すると、英文や単語の途中では改行されず英文や単語の最後に改行されます。なお、日本語はWidthサイズに合わせて改行されるので日本語の単語の途中では勝手に改行されます。(英文や単語ははみ出しても良いが日本語はWidthサイズに合うように改行する)

    ■ word-break: break-all;
    break-allを指定すると英語・日本語・その他の言語など、全ての言語に対してWidthサイズに合わせて改行されます。なお、括弧等も同様です。(全文字をWidthサイズに合うように改行する)

    ■ word-break: keep-all;
    keep-allを指定すると英語・日本語・その他の言語など、全ての言語に対して文章の途中では改行されません。文章や単語の最後に改行されます。(文章や単語の最後に改行するが指定したWidthサイズからはみ出る可能性があります。)

    word-breakを使うと事で、文章の改行の仕方を変える事ができます。word-breakでは上記の様に3つの改行の仕方を指定する事ができます。

    word-breakで文章の微妙な位置で改行されるのを修正する
    修正前

    この文章には『word-break
    : break-all;
    』を使用しています。
    むかしむかしあるところにお爺さんと
    お婆さんがいました。
    めでたしめでたし。

    修正後

    この文章には『word-break: break-all;』を使用しています。
    むかしむかしあるところにお爺さんとお婆さんがいました。め
    でたしめでたし。

    break-all を使おう!

    上記の修正前・修正後を見てると指定したWidthサイズに合わせて改行されている事がわかると思います。このように、文章やタイトルに括弧を使用した際や記号を使用した際に勝手に改行される問題を修正する事ができます。


    コメントしてね!