A Little Each Day

note to self

CSSで長い英語文字列を折り返す方法

こんにちは。 本日は英語などの外国語で長い文字列の場合、ボックスをはみ出てしまうのを防いで、きちんとボックス内で改行するようにするTipsを紹介したいと思います。

ホームページやwebサービスによっては長い英語の文字列があって、ボックスの外に文字列が溢れてしまうことがあるので実際にそれを防ぐ方法を見ていきましょう。

バージョン

HTML5
CSS3


word-wrapプロパティ

文字列を折り返すかどうかを指定するプロパティとしてword-wrapというものがあります。
特にword-wrapのプロパティを指定しない場合、デフォルトではnormalになります。
normalは日本語は自動で折り返してくれますが、長い英語の文字列などは折り返してはくれません。

normal 文字列を折り返さない
break-word 文字列を折り返す

normalの場合

normalの場合、上記にも書いたように英語などの文字列はボックス内で折り返さず、ボックスの外に溢れます。

<!-- htmlの雛形 -->
<div class="wrapper">
  <div class="box box1">
    <p>ああああああああああああああああああああああああああああああああああああああああああ</p>
  </div>
  <div class="box box2">
    <p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p>
  </div>
</div>
/* cssファイル */
.wrapper{
  width: 100%;
}
.box{
  width: 50%;
  height: 50px;
  margin: 10px 0;
}
.box1{
  background-color: orange;
}
.box2{
  background-color: skyblue;
}


この段階でブラウザで見てみると...

f:id:chi_kun:20160523151910p:plain


ひらがなの方はきちんと折り返していますが、ローマ字の方は折り返さずにボックスの外側にはみ出てしまいましたね。

これがnormal(デフォルト)の挙動です。


break-wordの場合

それでは実際にword-wrapの値をbreak-wordにして、ローマ字をボックス内で折り返すようにしてみましょう。

といっても簡単で、cssファイルに折り返したい文字列の部分にword-wrap: break-word;
を指定してあげるだけです。

.wrapper{
  width: 100%;
}
.box{
  width: 50%;
  height: 50px;
  margin: 10px 0;
}
.box1{
  background-color: orange;
}
.box2{
  background-color: skyblue;
}

/*  以下を追加 */
.box p{
  word-wrap: break-word;
}


すると...

f:id:chi_kun:20160523152606p:plain


ローマ字の方が上記のnormalの時と違い、ボックス内できちんと折り返しているのがわかると思います。



本日は以上です。