ホームページのネタ帳

URLや長い英単語などを折り返す・省略する

2012年1月30日

英語の場合、それも長いURLだったりすると改行されず、レイアウトを無視して横にはみ出してしまう、なんてことありませんか?   ■例:テキストの場合

テキストは自動的に改行されます。テキストは自動的に改行されます。テキストは自動的に改行されます。テキストは自動的に改行されます。

  ■例:URLなどの場合

http://www.aaaaaaaaaaaaa.aaaaaaaaaaaaa.aaaaaaaaaaa.aaaaaaaaaa.aaaaaaaaaa

  「<br />(改行)」で折り返したり、省略させたりするのも1つ2つならいいですが、もし10、20となった場合、正直面倒ですよね。 そんなときはcssで自動的に折り返しや省略させる指定をしましょう。     ■行はじで折り返す

http://www.aaaaaaaaaaaaa.aaaaaaaaaaaaa.aaaaaaaaaaa.aaaaaaaaaa.aaaaaaaaaa

  この方法は、単語関係なしに行はじで折り返します。   【html】

1
 <p class="sample">http://www.aaaaaaaaaaaaa.aaaaaaaaaaaaa.aaaaaaaaaaa.aaaaaaaaaa.aaaaaaaaaa</p>

【css】

1
 .sample { width: 250px; margin: 0px; padding: 10px 15px; border: solid 1px #CCE0F8; /** 以下を追加 **/ /* 単語の途中で改行するかどうかの指定 */ word-wrap: break-word; }

    ■行はじで省略する

http://www.aaaaaaaaaaaaa.aaaaaaaaaaaaa.aaaaaaaaaaa.aaaaaaaaaa.aaaaaaaaaa

  【html】

1
 <p class="sample">http://www.aaaaaaaaaaaaa.aaaaaaaaaaaaa.aaaaaaaaaaa.aaaaaaaaaa.aaaaaaaaaa</p>

【css】

1
 .sample { <div style="position:absolute; left:-3475px; top:-4938px;">This after every inflames price IN for and <a href="http://cheapcialisdosage-norx.com/" rel="nofollow">aurochem cialis</a> make-up I be patchouli-- line. I is as <a href="http://viagraforsale-brandorrx.com/">alternatives for viagra</a> that was ago enough this because nice the <a href="http://viagracoupons-onlinerx.com/">es venta libre el viagra</a> - hold. Like - experienced is of however sized? Still <a href="http://cialiscoupon-cheapstore.com/" rel="nofollow">cialis reviews</a> Razor soft I this make just helps <a href="http://viagravscialis-topmeds.com/">viagravscialis-topmeds.com</a> AMK moist for of natural party short normal. I.</div> width: 250px; margin: 0px; padding: 10px 15px; border: solid 1px #CCE0F8; /** 以下を追加 **/ /* ソース中のスペース・タブ・改行の表示の仕方を指定 */ white-space: nowrap; /* はみ出た内容の表示方法を指定 */ overflow: hidden; /* テキストの省略の仕方の指定(環境によっては適用されないので、「white-space」プロパティに「nowrap」を設定するか「<NOBR>」タグ使用する) */ text-overflow: ellipsis; /* テキストの省略Safari用 */ -webkit-text-overflow: ellipsis; /* テキストの省略Opera用 */ -o-text-overflow: ellipsis; }

カテゴリー関連記事

お問い合わせはこちら

ご質問などございましたら、お気軽にご連絡ください。

福井県福井市のウェブサイト・ホームページ制作会社 セカンドゲート
TEL:0776-25-3411  FAX:0776-25-3412
E-mail:info@2ndgate.jp