プロのクリエイターがホームページの作成や運用ノウハウについて無料公開!

ホームページTIPS
facebook twitter mail

このサイトでは、ホームページ制作運用に関する各種の情報を無料公開しています。
内容についてのご意見・ご指摘については、フォームからお知らせいただけば、適宜変更させていただきます。

html.cssに関するTips

2017.7.10更新

英語などの文章を自動改行してブロック内に収める方法

Attention!

htmlコーディングでは、英語などの文章は日本語と異なり、ブロック内で自動改行されずはみ出してしまう事があります。これを回避して自動改行でブロック内に収める方法をご紹介します。

1そもそも英語の文章がブロックからはみ出してしまう原因とは?
①日本語
<div class="box_test1">
あいうえおかきくけこさしすせそたちつてと
</div>

②英語 ※単語ごとにスペースあり
<div class="box_test2">
one two three four five six seven eight nine ten
</div>

③英語 ※スペース無し(ブロックからはみ出します)
<div class="box_test3">
http://agweoghapoweighapwiehgaowihegpawghapwiehgpaowhega
</div>

ボックスから文字がはみ出してしまう主な理由は、英文の場合に単語と単語の間のスペースが空いていない場合に起こります。 具体的には 長い URL や メールアドレス などで頻繁におきる現象です。コード例では、①②はブロック内に収まりますが、③の場合には、ブロックからはみ出してしまいます。

2CSSの記述:word-break:break-allで自動折り返しを指定できます。
.box_test3 {
  word-break:break-all;
}

//こちらでも対処可能です
.box_test3 {
  word-wrap:break-all;
}

word-breakプロパティに break-all を指定することで強制的に改行させることができます。 word-wrapでも同じように改行できますが、文字の改行点が微妙に違うので、しっくりくる方を選択して使用しても良いでしょう。「br」タグで無理やり改行指定をすると、htmlの文字列として不自然になりますし、デバイスによってレイアウトが崩れる懸念がありますので気をつけましょう。

トップへ