日別アーカイブ: 2013年10月4日

英語のページで文字があふれた時、単語の途中で改行させる方法

日本語と英語の2ヶ国語のホームページの更新をしていたら、日本語は問題なく表示されるのに、英語のページで文字があふれてしまいました。

原因

日本語の文章は句読点や中点によって、語や文章の区切りを識別しますが、英語などの西洋語は語の区切りに空白を挟んで記述されるので、単語が羅列され空白がないときに文字があふれてしまうことがあります。

単語の途中で改行させる方法

1)word-break: 行の改行方法を指定する(値:break-all)

word-breakプロパティで指定できる値には、normal・keep-all・loose・break-strict・break-allがあります。キーワードによってCJK(ハングル、日本語のカナ、および、CJK表意文字)と非CJKにおける改行制限の厳格さの程度を指定することができます。ちなみに、CJKとは、中国語(Chinese)、日本語(Japanese)、韓国語(Korean)の頭文字をとったものです。

word-break-CSS3リファレンス
初期値はnormalでCJKは厳格に改行制限されるため、日本語はあふれることがありません。

2)word-wrap: 単語の途中で改行するかどうかを指定する(値:break-word)

改行しない文字列が長すぎて行ボックスに収まらないとき、通常は文字列がボックスからはみ出して表示されます。このような場合、word-wrapプロパティの値にbreak-wordを指定すると、単語内で改行してボックスからのオーバーフロー(はみ出し)を防ぐことができます。

word-wrap-CSS3リファレンス

ワープロソフトなどで、行末に長い単語が来るなどして単語を2行に分ける必要が生じたときに行われる、単語の前半と後半をハイフンで繋ぐ機能。主に欧文で使われる機能である。

どこで切ってもよいわけではなく、単語中の音節の区切りでハイフネーションを行うことになっている。また、ハイフネーションを続けて行うと読みにくくなるため、3行以上連続してハイフネーションを行うのは望ましくないとされている。

ハイフネーションとは 【 hyphenation 】 – 意味/解説/説明/定義 : IT用語辞典

正しい位置で改行するためには、改行したい位置に<br/>タグを入れた方がよいかもしれません。

Examples

word-wrapがnormalの場合

SupercalifragilisticexpialidociousSupercalifragilisticexpialidociousSupercalifragilisticexpialidociousSupercalifragilisticexpialidocious

wordwrap: 単語の途中で改行するかどうかを指定する(値:break-word)

SupercalifragilisticexpialidociousSupercalifragilisticexpialidociousSupercalifragilisticexpialidociousSupercalifragilisticexpialidocious

wordbreak: 行の改行方法を指定する(値:break-all)

SupercalifragilisticexpialidociousSupercalifragilisticexpialidociousSupercalifragilisticexpialidociousSupercalifragilisticexpialidocious