IT用語辞典バイナリ | さくいん | サイトマップ | ヘルプ | お気に入りに追加  
CSS3リファレンス
IT用語辞典バイナリ<パソコン用語・コンピュータ辞書>
コンピュータ偉人伝<人物・画像・写真・プログラミング>
コンピュータ偉人伝<人物・画像・写真・プログラミング>
コンピュータ偉人伝<人物・画像・写真・プログラミング>
拡張子辞典<ファイル・変換・変更・表示>
HTML5タグリファレンス
CSS3リファレンス
HTML5 JavaScript API
エクセル関数リファレンス
ITパスポート試験
 
  
  IT用語辞典バイナリ > CSS3リファレンス > テキスト > word-wrapの解説
  カテゴリ別さくいん
  タグ別さくいん

word-wrapの解説

長い単語の改行ルールを指定するには?

要素書式

word-wrap : 【単語の改行方法の指定】 ;

対応ブラウザ

  • IE 9:○
  • Firefox 10.0:○
  • Opera 11.61:○
  • Chrome 17.0:○
  • Safari 5.1:○

    ※現在、動作にベンダープレフィックスが必要なブラウザは、括弧内にベンダープレフィックス付のプロパティを記載しています。
    ブラウザWindows 7上で動作確認を行っています。
    ユーザーの設定より、異なる挙動をする場合があります。

値一覧

内容
normal通常の改行位置でのみ自動改行する。単語の途中では自動改行しない(既定値)。
break-wordそうしなければ単語がボックスからはみ出すような場合は、単語の途中でも自動改行する。

解説文

英語などの分かち書きをする言語では、単語の途中では改行しないのが一般的なルールとなっています。HTMLでも、ボックスの幅がその単語を最後まで表示するのに足りない場合でも、既定では単語の途中では自動改行は行われません。

(なお、日本語のように、分かち書きをしない言語ではこのルールは適用されません)

word-wrapプロパティを使うと、このような場合の挙動を指定することができます。値「normal」は既定の挙動で、単語の途中では自動改行しません。値「word-break」を指定すると、ほかに適切な改行可能な位置がなく、単語がボックスの幅からはみ出すような場合には、単語の途中で改行して、ボックス内に収めます。

なお、折り返し方法を指定するtext-wrapプロパティがブラウザサポートされ、かつ、その値として、「none」(自動改行しない)や「unrestricted」(単語の途中に限らず、まったく改行の制限を行わない)が指定されていた場合は、その指定が優先され、word-wrapプロパティの指定は有効になりません。

サンプルソース

  <!DOCTYPE html>
  <html>
  <head>
  <meta charset="utf-8">
  <style>
  .box{
      float:left;
      width:70px;
      margin-left:100px;
      border:solid 1px silver;
  }
  #box1 {
      word-wrap:normal; /* 単語中の改行なし */
  }
  #box2 {
      word-wrap:break-word; /* 単語中の改行あり */
  }
  </style>
  </head>
  <body>
  <p id="box1" class="box">単語中の改行なし。<br><br>
   thisislongwordfortest Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
   Duis ac massa risus, sit amet commodo metus. 
   Donec eu ante ipsum. Mauris vitae nunc tellus, ut posuere turpis. 
   Morbi quis libero id nulla lacinia placerat. </p>
  <p id="box2" class="box">単語中の改行あり。<br><br>
   thisislongwordfortest Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
   Duis ac massa risus, sit amet commodo metus. 
   Donec eu ante ipsum. Mauris vitae nunc tellus, ut posuere turpis. 
   Morbi quis libero id nulla lacinia placerat. </p>
  </body>
  </html>

関連項目

(関連項目はありません)




iPhone 7 (PRODUCT)RED Special EditioniPhone 7 (PRODUCT)RED Special Edition
Appleが発売したiPhone 7の特別エディション。
Wi-Fi STATION N-01JWi-Fi STATION N-01J
NTTドコモが販売するモバイルWi-Fiルーター。
LAVIE Hybrid ZEROLAVIE Hybrid ZERO
NECパーソナルコンピュータが販売する2in1PCのシリーズ。

 ・ITパスポート試験とは
 ・試験範囲と内容
 ・サンプル問題にチャレンジ

 ・Windowsの歴史
ジョン・マッカーシー LISPの開発者
ジョン・マッカーシー
人工知能の研究分野における第一人者。
スティーブ・ジョブズ Appleの共同創設者
スティーブ・ジョブズ
「Mac」や「iPhone」を生み出した経営者。
デニス・リッチー C言語、UNIXの開発者
デニス・リッチー
C言語の設計、UNIXの開発に携わった人物。
».m4b MPEG-4オーディオファイルの拡張子。 up!
».m4r iPhoneの着メロにするAACファイルにつく拡張子。 up!
».xlsx Excel 2007で作成したファイルのデフォルトの拡張子。
».docx Word 2007の標準的な保存形式。XML形式となっている。

2017年3月26日現在
ランキング1   ICT (用語辞典)
ランキング2   セグメント (用語辞典)
ランキング3   スワイプ  (用語辞典)
ランキング4   プラットフォーム  (用語辞典)
ランキング5   リーンスタートアップ  (用語辞典)
ランキング6   リマインダー  (用語辞典)
ランキング7   ハードコピー  (用語辞典)
ランキング8   ローゼット  (用語辞典)
ランキング9   キュレーションサービス  (用語辞典)
ランキング10   リグレッションテスト  (用語辞典)
RSS 0.91 RSS 1.0 RSS 2.0
IT用語辞典バイナリについてウェブリオ株式会社についてお問い合わせ先テクニカルライター募集利用規約
プライバシーポリシー著作権・商標について協力社一覧Weblio 辞書スマート翻訳英和辞典 - Weblio辞書Weblio英会話
©2012 Weblio, Inc. All rights reserved.