Chapter 12無料公開

- 長いアルファベットの文字列でも改行させる(頻出度:★★☆)

hideki_climax
hideki_climax
2022.09.02に更新
このチャプターの目次

概要

長いアルファベットは、それで1単語と見なされてしまい改行が起こりません。デフォルトでは単語の途中で改行するルールになっていないからです。

このケースは記事のタイトルなど、ユーザーが投稿できうるコンテンツにありがちです。こういう場合では改行ルールをCSSによって指定しましょう。overflow-wrapというプロパティを使います。

デモ

デモサイトはこちら。

https://itokoba.com/demos/word-break/

コード

デモの2つ目の例の部分を抜粋しています。

index.html
<p class="Text">
  abcdefabcdefabcdefabcdefabcdefabcdefabcdefabcdefabcdefabcdefabcdefabcdefabcdefabcdefabcdefabcdefabcdefabcdefabcdefabcdefabcdefabcdefabcdefabcdefabcdefabcdefabcdefabcdefabcdefabcdefabcdefabcdefabcdefabcdefabcdefabcdefabcdefabcdefabcdefabcdefabcdefabcdefabcdefabcdefabcdefabcdefabcdefabcdefabcdefabcdefabcdefabcdefabcdefabcdefabcdef
</p>

<p class="Text">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
style.css
.Text {
  width: 100%;
  overflow-wrap: break-word;
}

解説

このように、overflow-wrap: break-wordを指定すると長いアルファベットでも強制的に改行を行います。

これまではword-break: break-all;という指定もよく紹介されていたと思いますが、その指定では単語の途中でも問答無用で改行してしまいます。

一方overflow-wrap: break-word;はなるべく単語の途中では改行しないようにします。デモサイトで違いを確認してみてください。

読みやすさの観点でこちらの方が良さそうですね。