ホーム>Web デザインのチュートリアル>WEB標準化

URLやメールアドレスなどの長い文字を折り返す

著者：Eve Cole 更新時間：2009-05-31 01:04:55

長い文字を自動的に折り返す (URL や電子メール アドレスなど) 目的: 非常に長い文字列を自動的に折り返すようにしますが、短い単語を途中で区切らないようにします。

その方法は次のとおりです。

  1. <スタイル>   
  2. ディブ{
  3. width:300px;overflow:hidden;/* FF、Opera の場合は固定幅、余分な文字を非表示にします*/
  4. word-wrap:break-word;word-break:normal;/* IE、Safari では自動行折り返しをサポート*/
  5. }
  6. </スタイル>   

IE、Firefox、Opera、Safari で次のコードを実行すると、次の内容を確認できます。

  1. <スタイル  type = "テキスト/CSS" >   
  2. div{幅:200ピクセル;背景:赤;オーバーフロー:非表示;ワードラップ:ブレイクワード;ワードブレイク:ノーマル;}
  3. </スタイル>   
  4. < div >おめでとうございます
  5. 長い文字 (URL や電子メール アドレスなど) を折り返す:
  6. http://www.div-css.com/html/standard/base/81857.html
  7. SDFG 一部の単語にスペースがあります...
  8. XXXXXXXXXXXXDGXXXXXXXXYYYYDFGYYXXXXXXXSDGXXXXXXXXXXXXyXXXXXXXXXXx空白文字: nowrap
  9. 一部の中国語フォント 一部の中国語フォント 一部の中国語フォント 一部の中国語フォント 一部の中国語フォント 一部の中国語フォントは折り返されない場合があります
  10. Webの標準化< a   href = "http://www.div-css.com"   _fcksavedurl = "http://www.div-css.com" > www.div-css.com </ a >   
  11. 漢字 中国語 漢字 中国語 英語 漢字 中国語 英語 中国語 英語 中国語 英語 中国語 英語 中国語 英語 中国語 英語 中国語 英語
  12. </div>  

また、Firefox で JS を使用して長い文字列を自動的にラップする方法については、ラップ後の文字列が元の文字列ではなくなるため、推奨されません。アドレスを再度コピーすると、元のアドレスは取得されなくなり、途中にスペースが生じます。それはすでに別のリンクです。
関連記事