[Å] boxからURLを飛び出させないスタイルシートの記述方法

ボックスから飛び出すURLテキスト

URLリンクをサイドのエリアに入力するとこうしたことが発生する。

ブラウザによっては自動的に改行を行ってくれるものもあるが…。

各ブラウザに対応するためにはスルーするわけにもいかない。

そこでとっても役に立つコードを見つけたのでメモ。

【boxからURLを飛び出させないスタイルシートの記述方法】

■スタイルシート

pre {
  white-space: pre;           /* CSS 2.0 */
  white-space: pre-wrap;      /* CSS 2.1 */
  white-space: pre-line;      /* CSS 3.0 */
  white-space: -pre-wrap;     /* Opera 4-6 */
  white-space: -o-pre-wrap;   /* Opera 7 */
  white-space: -moz-pre-wrap; /* Mozilla */
  white-space: -hp-pre-wrap;  /* HP Printers */
  word-wrap: break-word;      /* IE 5+ */
  font-size:1.2em;
  line-height:1.4em;
  font-weight:normal;
  padding:0;
  margin:0;
}

■ソース

<ul class="side_link">
    <li>テストテキスト<br>
    <pre><a href="http://genome.gsc.riken.jp/osc/members/Toshihisa_Ishikawa.html#other" target="_blank">http://testtesttesttesttesttesttesttesttesttesttesttesttest.com</a><pre>
    </li>
</ul>

aタグをpreタグで囲むということです。

そうすると!

このように表示されます。

ボックスからはみ出さないURL

ボックスエリアと書かれている下に出ているボーダーがサイドエリアの最大のwidthです。
しっかりとURLが折返されているのがわかると思います。

純粋なIE6とIE7でもしっかりと折返されていました。

参考サイト:味に使えるCSS小技のメモ&サンプル集 – かちびと. net

■ 同じカテゴリについてもっと読む

ブログ運営者をフォローする!

\ この情報を周りの人にも教える /

noimage
プロフィールあかめの画像
あかめAkame Mizuho
横浜在住。フリーランス。
食べ歩き / 旅行 / カメラ / WEBデザイン 好き。

プロフィール / お問い合わせ

個人アカウント(メイン)▼

ブログ公式アカウント▼