
文字や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>
参照サイト:
WordPressテーマを無料プレゼント





当サイトはWEBデザインやWordPressネタ中心のブログです。詳しくは