長い英語のリンク先を自動的に改行をさせる方法～其の参～

3月の半ばに入り日にちが経ちますが…

中学校や小学校の卒業式がそろそろ近づいてきてますね。

でも、外に出かけるとほぼマスクをしてる人が多いんですね…

さてと、話題に入りましょう！

ある業者が作成したホームページを見たところ、英語のリンク先が全く自動的に改行されてないことを気づいてなかったそうです。

こっちはレスポンシブで確認したところ、英語のリンク先がそのまま改行されず続けて表示されてました。

今回は「word-wrap」の使い方について説明しますね。

*{
	word-break: normal;
	word-break: break-all;
	word-break: keep-all;
	word-break: break-word; /* 非推奨 */
}

word-break	normal	既定の改行規則を使用します。
	break-all	CJK (中国語、台湾語、日本語、韓国語) 以外のテキストにおいて、単語中などでの文字の改行に関する禁則処理を解除し、どの文字の間でも改行するようにします。
	keep-all	CJK テキストの改行を許可しません。 CJK 以外のテキストについては normal と同じ挙動となります。
break-word	overflow-wrap プロパティの値とは関係なく、 word-break: normal や overflow-wrap: anywhere と同じ効果になります。

昨日と続けて、文字の処理方法についてご紹介しました。

設定するときは、

*{
	overflow-wrap: break-word;
	word-break: break-all;
}

をしておいてください。

では、また！

Leonard-Blog