俺の開発研究所

Ruby on Rails、Linux、Windowsを中心にIT技術系の備忘録とか。よく忘れるので。

*

widthで幅指定したdivタグ内のアンカーURLがはみ出ないようにする方法

      2014/08/31

このブログはWordPressなんですが、記事内でURLを直接書いてアンカーにしてるところが、思いっきり右側にはみ出してました。。

何でかなーと思って調べてみたら、別にWordPressに問題はなく、CSSで「white-space」とかいうものを指定してやれば、はみ出さないように出来るみたい。

実際にやってみた。

スポンサード リンク

white-space」は、ソース中のスペース・タブ・改行の表示の仕方を指定する。

下記のような感じで、divタグ内のアンカーに対して「white-space」を指定する。

なお、CSSのバージョンやブラウザによって多少異なるらしく、複数指定している。

結果はこんな感じ。

何も指定していない赤色ははみ出しているが、white-spaceを指定した緑色ははみ出していない。

white-space

さっそく対応してみたら、ちゃんとはみ出さずにdivタグ内に収まっていました。

参考サイト

MIYAMOTO RYOSUKE BLOG: wordpress customfieldに文章を書けるようにする方法。(改行使えたり、リンクタグが飛び出ない)

white-space-スタイルシートリファレンス

 - CSS, HTML