From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:40:17 -0500 Subject: initial commit --- files/ja/web/css/white-space/index.html | 248 ++++++++++++++++++++++++++++++++ 1 file changed, 248 insertions(+) create mode 100644 files/ja/web/css/white-space/index.html (limited to 'files/ja/web/css/white-space/index.html') diff --git a/files/ja/web/css/white-space/index.html b/files/ja/web/css/white-space/index.html new file mode 100644 index 0000000000..df1f143540 --- /dev/null +++ b/files/ja/web/css/white-space/index.html @@ -0,0 +1,248 @@ +--- +title: white-space +slug: Web/CSS/white-space +tags: + - CSS + - CSS テキスト + - CSS プロパティ + - Reference + - white-space +translation_of: Web/CSS/white-space +--- +
{{CSSRef}}
+ +

CSS の white-space プロパティは、要素内の{{Glossary("whitespace", "ホワイトスペース")}}をどのように扱うかを設定します。

+ +
{{EmbedInteractiveExample("pages/css/white-space.html")}}
+ + + +
+

メモ: 要素の内部で折り返しを行うには、代わりに {{CSSxRef("overflow-wrap")}}, {{CSSxRef("word-break")}}, {{CSSxRef("hyphens")}} を使用してください。

+
+ +

構文

+ +
/* キーワード値 */
+white-space: normal;
+white-space: nowrap;
+white-space: pre;
+white-space: pre-wrap;
+white-space: pre-line;
+white-space: break-spaces;
+
+/* グローバル値 */
+white-space: inherit;
+white-space: initial;
+white-space: unset;
+
+ +

white-space プロパティは、以下の値の一覧から選択した単一のキーワードで指定します。

+ +

値

+ +
+
normal
+
連続するホワイトスペースはまとめられます。ソース内の改行文字もホワイトスペースとして扱われます。行ボックスを埋めるために、必要なら行を折り返します。
+
nowrap
+
normal と同じくホワイトスペースを詰めますが、行の折り返しは行いません。
+
pre
+
連続するホワイトスペースはそのまま残され、行の折り返しは、ソース内の改行文字と、 {{HTMLElement("br")}} 要素でのみ行います。
+
pre-wrap
+
連続するホワイトスペースはそのまま残されます。行の折り返しは、改行文字や {{HTMLElement("br")}} 要素のあるときか、行ボックスを埋めるのに必要なときに行います。
+
pre-line
+
連続するホワイトスペースは詰められて 1 つになります。行の折り返しは、改行文字や {{HTMLElement("br")}} 要素のあるときか、行ボックスを埋めるのに必要なときに行われます。
+
break-spaces
+
下記の点を除いて、動作は pre-wrap と同じです。 +
    +
  • そのまま残された連続するホワイトスペースは、行末にあるものを含め、空間を占有します。
    • +
  • 残されたそれぞれのホワイトスペースの後で、ホワイトスペースの間を含め、改行する可能性があります。
    • +
  • そのような残された空白は空間を占有し、ぶら下がらず、ボックスの固有の寸法に (min-content size および max-content size に) 影響します。
    • +
+
+
+ +

次の表に、white-space 値の動作をまとめます。

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
改行空白とタブ文字テキストの折り返し行末の空白
normalまとめるまとめる折り返す除去
nowrapまとめるまとめる折り返さない除去
preそのままそのまま折り返さないそのまま
pre-wrapそのままそのまま折り返すぶら下げ
pre-lineそのまままとめる折り返す除去
break-spacesそのままそのまま折り返す折り返す
+ +

形式文法

+ +
{{CSSSyntax}}
+ +

例

+ +

基本的な例

+ +
code {
+  white-space: pre;
+}
+ +

<pre> 要素内での改行

+ +
pre {
+  word-wrap: break-word;      /* IE 5.5-7 */
+  white-space: pre-wrap;      /* 現行ブラウザー */
+}
+ +

操作して確認する

+ + + +

ソース

+ +
<p>    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+
+    Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+
+    Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
+
+    Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+
+ +

CSS を加えた結果

+ +

{{EmbedLiveSample("See_it_in_action_LiveSample", "100%", 500)}}

+ +

仕様書

+ + + + + + + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName("CSS3 Text", "#propdef-white-space", "white-space")}}{{Spec2("CSS3 Text")}}折り返しアルゴリズムの詳細を記述。
{{SpecName("CSS2.1", "text.html#white-space-prop", "white-space")}}{{Spec2("CSS2.1")}}初回定義
+ +

{{CSSInfo}}

+ +

ブラウザーの互換性

+ + + +

{{Compat("css.properties.white-space")}}

+ +

関連情報

+ + -- cgit v1.2.3-54-g00ecf