2021/11/02

【CSS】文章を両端揃えしたらword-break:break-allも設定しよう

こんにちは！「両端」の読み方は「りょうはじ」派のMizutani(@sirycity)です。IMEによっては変換できないよね。

今日はCSSでテキストを両端揃えにするときには併せてword-break:break-allも設定しようって話です。

結論

こんな感じに設定するといいよ。

p {
  text-align: justify;
  word-break: break-all;
}

htmlでは文章を<p>で書きます(超今更)

<p>こんにちは</p>

DTPとかでよくあるテクニックで、文章の両端を揃えるってのがあります。両端が揃ってるときれいですよね。CSSではtext-align:justifyで再現できます。

text-align:justifyを設定すると長い英単語の直前にある日本語が不自然に伸びてレイアウトが崩れます。より厳密に言うと、横幅をnとするとnよりちょっとだけ長い日本語→nより長い英単語の順番で来たら崩れます。

こんな感じに。

3行目の日本語が変な風に伸びてます。ついでに4行目の長い英単語も貫通してる。CSSの仕様決める時に日本語と英語の混在とかはあんま考慮されてなかったんですかね。

解決方法は意外と簡単で、word-break:break-allを設定するだけです。するとこんな感じになる。

いい感じ。ついでに長い英単語の貫通もなくなりました。ただし、英単語が一部途中で改行されてしまいました。

break-allは使わない方が良いって言う人もいます。なぜなら↑で書いたとおり英単語が単語の途中で改行されちゃうから。

なのでbreak-allの代わりにoverflow-wrap:break-wordを使った方が良いという人もいます。こいつは

ってやつです。こんな感じ。

ただし、僕個人としてはbreak-allの方がおすすめです。なぜなら↑みたいにoverflow-wrapだと日本語伸びる問題が解決しないから。

言い方を変えると、日本語のテキストを両端揃えにした時点でこの2つのうちどちらかは許容する必要があります。

となった時に、より深刻なのは日本語が伸びる問題の方だと僕は考えています。

正直言って、日本語のような単語間にスペースを空けない言語に慣れた人間にとっては英単語が途中で改行されようがそんなに違和感はないのでは？というのが個人的な感想です。

CSSの改行はすごく深い問題です。ちゃんとしようと思うとたいへん。もっとシンプルになると...嬉しいです。