ブログに引用したURLがスマホで横に見切れてしまったときの解決方法

スポンサーリンク

スマホで見たときに、引用として記載したURLが横に見切れてしまいました。

こんなことってよくありますよね?

これは、英字で書かれているURLが1つの単語として認識しまっていることが原因だと判明しました。

そこで、英字の途中でも改行をするという指定をCSSに追記し解決することができました。今回の解決までの流れを解説していきたいと思います!

CSSの基本構造

CSSへの追記といきなり言われても意味不明の文字の羅列です。ですが、CSS基本書式はめちゃくちゃ簡単です。

CSSの基本書式は

セレクタ{プロパティ:値;}

となっています。それぞれの意味は

  • セレクタ→どこ
  • プロパティ→何を
  • 値→どうする

です。

この構造を今回の改行調整に当てはめてみましょう!

「引用部分のURLをスマホにおさまるようにして改行して!」と追記したCSS

blockquote {
word-wrap: break-word;
}

今回の場合

  • セレクタ(どこに)→引用部分(=blockquote)
  • プロパティ(何を)→改行調整(=word-wrap)
  • 値(どうする)→(必要に応じて)単語の途中でも改行をする(=break-word)

と追記をしました。

セレクタの部分は、引用としてblockquoteという引用のタグで囲っている部分どこに当たります。

続いてプロパティの部分でword-wrap(=改行調整の意味)何をに当たります。

そして最後に単語の途中でも改行どうするにあたることになります。

これにより無事解決になりました。

URL 改行

スポンサーリンク

まとめ

URLは、表の中に記載する場合などもありパソコンだとおさまっているのにスマホだとおさまっていないというケースが結構あります。

その時には、上記の方法でCSSへ追記をしてURLの改行を強制的に行う指定をしてみてください。

こちらも併せてどうぞ!

サイトの記事をまとめて別サイトに移行する4つの手順

 

この記事が気に入ったら
いいね ! しよう

Twitter で
スポンサーリンク