このページはコミュニティーの尽力で英語から翻訳されました。MDN Web Docsコミュニティーについてもっと知り、仲間になるにはこちらから。
text-wrap-mode
Baseline 2024Newly available
Since October 2024, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.
text-wrap-mode はCSS プロパティで、要素内のテキストを折り返すかどうかを制御します。様々な値で、ブロック要素のコンテンツを折り返す代替方法を提供します。また、text-wrap の一括指定またはwhite-space の一括指定を使って設定したり、リセットしたりすることができます。
メモ:white-space-collapse およびtext-wrap-mode プロパティは、white-space 一括指定プロパティを使用して同時に宣言できます。
メモ:このプロパティの名前は、 CSSWG がより良い名前を探すまでのプレースホルダーです。
試してみましょう
text-wrap-mode: wrap;text-wrap-mode: nowrap;<section> <div> <p>ボックス内のテキストを編集してください:</p> <div> <p contenteditable> Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatem aut cum eum id quos est. </p> </div> </div></section>.whole-content-wrapper { display: flex; flex-direction: column; align-items: center; width: 100%;}#example-element { border: 1px solid #c5c5c5; width: 250px;}構文
/* キーワード値 */text-wrap-mode: wrap;text-wrap-mode: nowrap;/* グローバル値 */text-wrap-mode: inherit;text-wrap-mode: initial;text-wrap-mode: revert;text-wrap-mode: revert-layer;text-wrap-mode: unset;値
このプロパティは、強制されないソフトラップの機会で行が折り返されるかどうかを指定します。指定可能な値は次の通りです。
公式定義
| 初期値 | wrap |
|---|---|
| 適用対象 | text and block containers |
| 継承 | あり |
| 計算値 | 指定通り |
| アニメーションの種類 | 離散値 |
形式文法
text-wrap-mode =
wrap|
nowrap
例
折り返すコンテンツ
既定ではコンテンツを折り返す設定になっているので、text-wrap-mode プロパティは必要ありません。この例では、コンテンツはボックス内に収まるように次の行に流れますが、最後の行は格納するボックスよりも長いのではみ出します。
HTML
<div>CSS IS AWESOME</div>CSS
.box { font-family: "Arial", sans-serif; font-weight: bold; font-size: 64px; box-sizing: border-box; border: 4px solid black; padding: 0px 3px; width: 223px; text-wrap-mode: wrap;}結果
折り返さないコンテンツ
この例では、コンテンツはtext-wrap-mode: nowrap; で折り返さないように特別に指示されているため、コンテンツがボックス内に合わせられ、次の行に流れません。コンテンツを含むボックスよりも長いため、はみ出します。
HTML
<div>CSS IS AWESOME</div>CSS
.box { font-family: "Arial", sans-serif; font-weight: bold; font-size: 64px; box-sizing: border-box; border: 4px solid black; padding: 0px 3px; width: 223px; text-wrap-mode: nowrap;}結果
仕様書
| Specification |
|---|
| CSS Text Module Level 4 # text-wrap-mode |