【HTMLでの文章の改行(折り返し)方法】自動で改行させるには？
英文で文字列が長いとき、特定のページの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です。