ブログ記事内のURLが折り返しされない時は、CSSの「word-break」で即解決
お仕事で飲食店のブログも書いたりしているタキです。
ブログを書いていて、商品紹介などをする時に、URLを載せることがあるかと思います。
自分もたまにありますが、とても長いURLをブログ本文に載せると、ブログを公開してびっくり。
「URLが突き抜けてるー(はみ出してる)・・・!」
こんな状態になって、ドキドキしたことは一度や二度ではありませんでした。
スポンサーリンク
長いURLがはみ出してしまう場合の対処法
そんなわけで前置きが長かったですが、こんな時はHTMLタグに、CSSを1行書けばOK。
たとえばブログ本文に、こんな感じでURLを書いたとします。
<p> http://www.tsukinukechimattazedoushitaraiinokaタキranaikarakokowomiterundakara.net </p>
※pタグが無い場合は、pタグで囲ってください。
これだとブラウザによってはURLの自動改行がうまくいかず、こんなふうにはみ出してしまうことがあります。
そこで、Pタグに以下のように追記。
<p style="word-break:break-all;"> http://www.tsukinukechimattazedoushitaraiinokaタキranaikarakokowomiterundakara.net </p>
これで解決です。
(ただし、一部の古いブラウザなどではこのCSS自体が効かないことがあります)
細かなことですが、ブログなどはスマホで見る人も多いですし、より快適に読んでもらうためには、こういった対応もきっちりしておくのが吉、かと思います。
関連記事
- フリーランスにこそ必要な、外注を効果的に使うテクニック
- Evernoteでスマホと同期したら、古い情報に戻ってしまった時の解決策
- たった2行で郵便番号から住所を自動入力してくれるjQueryプラグイン「ajaxzip3」
- 記事単位でURLを保存できるブックマークツール「Pocket」