【CSS Modules】line-breakプロパティの使い方

line-breakプロパティは、テキストの改行ルールに関する設定値を保持するプロパティです。特に日本語、中国語、韓国語（CJC言語）のように、単語間に区切りがない言語において、テキストがどのように改行されるかを指定するために使用されます。これにより、行の途中で文字が不自然に途切れることを防ぎ、ウェブコンテンツの視認性と可読性を大きく向上させることが可能です。

このプロパティは、禁則処理（句読点や記号が行頭・行末に来ないようにするルール）の厳しさや、単語の途中で改行を許可するかどうかなどを細かく設定できます。たとえば、autoを指定するとブラウザのデフォルト設定に従い、looseは比較的自由な改行を許可して文字の途中でも改行されることがあります。normalはCJC言語に適した標準的な改行ルールで、禁則処理を考慮しつつ行を詰めて表示します。一方、strictは最も厳格な改行ルールであり、禁則処理を強く適用し、改行できる場所を最小限に抑えるため、行の余白が増える可能性があります。また、anywhereは単語の途中でも改行を許可し、行のオーバーフローを防ぐことを最優先します。

ウェブサイトやアプリケーションが多言語に対応する現代において、ユーザーに提供するテキストコンテンツが画面の幅に合わせて適切に改行され、どの言語のユーザーにとっても読みやすい表示を提供することは非常に重要です。特に日本語のWebサイトを制作する際には、line-breakプロパティを適切に設定することで、段落の見た目を美しく整え、ユーザーに快適な読書体験を提供し、コンテンツの専門性や信頼性を高めることにも繋がります。

Copy
1.element {
2  line-break: normal;
3}

引数なし

引数はありません

戻り値なし

戻り値はありません