【HTMLでの文章の改行(折り返し)方法】自動で改行させるには?

2019年5月13日PC, WordPress

改行

英文で文字列が長いとき、特定のページのURLを載せたとき、折り返されずにそのまま枠からはみ出すことってありますよねぇ。今回は、そんなときにHTMLへ直接書いて対応する方法を紹介します。

スポンサーリンク

答えはword-wrapプロパティ

例えば下のような場合、堂々と枠からはみ出ていますね。

https://www.google.co.jp/maps/place/%E6%9D%B1%E4%BA%AC%E3%82%B9%E3%82%AB%E3%82%A4%E3%83%84%E3%83%AA%E3%83%BC/@35.710067,139.8085064,17z/data=!3m1!4b1!4m5!3m4!1s0x60188ed0d12f9adf:0x7d1d4fb31f43f72a!8m2!3d35.7100627!4d139.8107004

ここへ「style="word-wrap:break-word"」を追記することで、ちゃんと枠内に収まるようになります。

https://www.google.co.jp/maps/place/%E6%9D%B1%E4%BA%AC%E3%82%B9%E3%82%AB%E3%82%A4%E3%83%84%E3%83%AA%E3%83%BC/@35.710067,139.8085064,17z/data=!3m1!4b1!4m5!3m4!1s0x60188ed0d12f9adf:0x7d1d4fb31f43f72a!8m2!3d35.7100627!4d139.8107004

具体的にどのように書いているのか、HTMLで見てみると下のようになります。

<p style="word-wrap:break-word" class="has-background has-very-light-gray-background-color">
https://www.google.co.jp/maps/place/%E6%9D%B1%E4%BA%AC%E3%82%B9%E3%82%AB%E3%82%A4%E3%83%84%E3%83%AA%E3%83%BC/@35.710067,139.8085064,17z/data=!3m1!4b1!4m5!3m4!1s0x60188ed0d12f9adf:0x7d1d4fb31f43f72a!8m2!3d35.7100627!4d139.8107004</p>

黄色線の部分が、折り返しの設定ですね。

このword-wrapプロパティに関しては、

  • word-wrap:normal
  • word-wrap:break-word

2種類がありますので、念のために意味を確認しておきましょう。
※本当はword-wrap:break-allもありますが、ブラウザによって対応がまちまちなため、今回は紹介しません。

word-wrapプロパティの意味

それぞれの意味は

word-wrap:normal → 通常通り、単語の分割で改行する。
word-wrap:break-word → 単語の途中でも、必要に応じて改行する。

というものです。

URLの場合、" / (スラッシュ) “も1文字とみなされるため、長い単語として扱われます。そこで「word-wrap:break-word」を指定することで、改行されるようにします。

今回はHTMLへ直接書いていますが、もちろんCSSへ書いてもOKです。

PC, WordPress

Posted by 管理人