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

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

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

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

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

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

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

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

*{
	overflow-wrap: normal;
	overflow-wrap: break-word;
	overflow-wrap: anywhere;
}

overflow-wrap	normal	通常の単語の分割位置 (2つの単語の間の空白など) で自動的に改行されます。
	anywhere	行内にその他の分割可能な位置がない場合、通常は分割可能でない単語が任意の場所で分割されますが、コンテンツの最小固有寸法を計算する時に、単語分割によって導入された折り返し可能位置が考慮されません。
	break-word	英文字があふれることを避けるために、行内にその他の分割可能な位置がない場合、その他の分割できない文字列 — 長い単語や URL — が任意の場所で自動的に分割されます。分割位置にハイフン文字は挿入されません。コンテンツの最小固有寸法を計算する時には、単語分割によって導入された折り返し可能位置が考慮されます。

次回は「word-wrap」の使い方を説明します！

では、また！

Leonard-Blog