文字やURLが、枠を越えてはみ出てしまうのを防ぐ為に便利なCSSプロパティ「word-wrap」をご紹介します。基礎なので、ご存知の方も多いかもしれませんが。

word-wrap

word-wrapは、文章や長いURLが ボックスの幅を越えることを制御するプロパティです。

例えば、以下のDEMOをご覧ください（クリックで見れます）。

このように、綺麗にボックス中にテキストを納めることが出来ます。

設定

以下のようにCSSを記述します。

.break-word {
  word-wrap: break-word;
}

マークアップはサイトに合わせて適宜変更してください。以下は例

<div class="break-word">
  <p>http://design-plus1.com/</p>
</div>

参照サイト：

WebDesignerWall

WordPressテーマを無料プレゼント