CSS 意図しない場所で折り返された文章の対処方法

はじめに

CSSで、pタグなどに文字を表示しているときに変な位置で改行されたことがありました。

前提

言語： CSS

• text-wrap： https://developer.mozilla.org/ja/docs/Web/CSS/text-wrap

起こった状況

pタグで文字を表示しているとき、上の画像のように変なところで改行されてしまうことがありました。

画像は分かりやすいようにpタグに赤線をつけています。

本当は赤線いっぱいの右端まで文字が到達してから次の行に改行してほしいのに、中途半端に右が空きます。

対処方法

結論としては、

p {
        text-wrap: blance;
    }

のように、text-wrap: blance; が効いていた事が原因でした。

このtext-wrapは要素の中の折り返し方を指定できます。

blanceは全ての行の横幅が同程度になるように指定するので、中途半端なところで折り返されていたのです。

p {
        text-wrap: wrap;
    }

こうすると綺麗に右端で折り返されます。

いいかんじに折り返されました！

なぜ勝手にblanceになっていたのかですが、

私はCSSを書くときに、reset.cssを使って一旦余計な余白をなくしてから作業をしていました。

このときreset.cssはインターネットの検索を元にしたものを使っていたのですが、この中にtext-wrap: blance;と書いてあったのです。

分からないプロパティはそのままで良いと思っていたのが仇になりました。

おわりに

CSSで意図しない場所で折り返されてしまう問題の対処方法を紹介しました。

reset.cssを適当にしてはいけないですね。