日本語とアルファベットの改行の違い

CSS

なんなのよ、もう・・・

どういうことなの?

日本語の文章を画面からはみ出させようとしたら、画面端で改行されちゃうんですよね…。

こんなカンジ

See the Pen
WNGbxzG
by AtsushiNakata (@nakata999)
on CodePen.

アルファベットは改行されずに画面からはみ出してるのに。

解決方法

See the Pen
GRjgjrj
by AtsushiNakata (@nakata999)
on CodePen.

日本語も改行されずにはみ出させることができました。

p {
  (略)
  white-space: nowrap;
}

“white-space"に"nowrap"を指定します。初期値は"nomal"で、コレだと半角スペースがあるとそこで改行されてしまうみたいです。「日本語に半角スペースなんか入れてないじゃん!」って思ったんですけど、日本語は1文字ごとに半角スペースがあると見なされるとかナントカ。そんなワケで"nowrap"にして半角スペースがあっても改行されないようにしました。ムズカシイなぁ。

おしゃれ度

★☆☆☆☆

Posted by ナカタ