【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の仕様決める時に日本語と英語の混在とかはあんま考慮されてなかったんですかね。
break-allで解決
解決方法は意外と簡単で、word-break:break-all
を設定するだけです。するとこんな感じになる。
いい感じ。ついでに長い英単語の貫通もなくなりました。ただし、英単語が一部途中で改行されてしまいました。
overflow-wrapを使った方がいい?
break-all
は使わない方が良いって言う人もいます。なぜなら↑で書いたとおり英単語が単語の途中で改行されちゃうから。
なのでbreak-all
の代わりにoverflow-wrap:break-word
を使った方が良いという人もいます。こいつは
- 英単語の途中では改行しない
- でも長い英単語は改行してくれる
ってやつです。こんな感じ。
いやbreak-allの方がいいと思う
ただし、僕個人としてはbreak-all
の方がおすすめです。なぜなら↑みたいにoverflow-wrap
だと日本語伸びる問題が解決しないから。
言い方を変えると、日本語のテキストを両端揃えにした時点でこの2つのうちどちらかは許容する必要があります。
- 日本語が伸びる問題
- 英単語の途中が改行されちゃう問題
となった時に、より深刻なのは日本語が伸びる問題の方だと僕は考えています。
正直言って、日本語のような単語間にスペースを空けない言語に慣れた人間にとっては英単語が途中で改行されようがそんなに違和感はないのでは?というのが個人的な感想です。
結論
CSSの改行はすごく深い問題です。ちゃんとしようと思うとたいへん。もっとシンプルになると...嬉しいです。
LINK
TAGS
LATESTS
POPULAR
- CSS2021/04/29【CSS】右寄せの方法は結局flexが一番良さそう
- React2020/07/13【JS】Reactのstyleの使い方、書き方いろいろ
- Payment2021/10/16GooglePayでVisaタッチを使う時に知っておきたい過酷な現実【追記あり】
- Others2021/07/11Slackに予約投稿機能ができて嬉しいけどそれでもまだ少し不満な理由【追記あり】
- CSS2020/04/30【CSS】tailwind.cssでよく使うデザインパターン
- CSS2019/03/30【CSS】100vhは「一画面」ではないという罠
- CSS2020/06/09【CSS】max-font-sizeやmin-font-sizeを使いたくなったら
- Vue2019/06/29【JS】Vueの:classの書き方3通り
- JavaScript2020/09/02【JS】yarnの長所とyarnからnpmに戻ってきた理由
- React2020/06/04【JS】ReactのclassNameの色々な書き方紹介