initial commit

1 files changed, 248 insertions, 0 deletions

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
+---
+<div>{{CSSRef}}</div>
+
+<p>CSS の <strong><code>white-space</code></strong> プロパティは、要素内の{{Glossary("whitespace", "ホワイトスペース")}}をどのように扱うかを設定します。</p>
+
+<div>{{EmbedInteractiveExample("pages/css/white-space.html")}}</div>
+
+<div class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</div>
+
+<div class="note">
+<p><strong>メモ:</strong> <em>要素の内部で</em>折り返しを行うには、代わりに {{CSSxRef("overflow-wrap")}}, {{CSSxRef("word-break")}}, {{CSSxRef("hyphens")}} を使用してください。</p>
+</div>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="brush: css no-line-numbers">/* キーワード値 */
+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;
+</pre>
+
+<p><code>white-space</code> プロパティは、以下の値の一覧から選択した単一のキーワードで指定します。</p>
+
+<h3 id="Values" name="Values">値</h3>
+
+<dl>
+ <dt><code>normal</code></dt>
+ <dd>連続するホワイトスペースはまとめられます。ソース内の改行文字もホワイトスペースとして扱われます。行ボックスを埋めるために、必要なら行を折り返します。</dd>
+ <dt><code>nowrap</code></dt>
+ <dd><code>normal</code> と同じくホワイトスペースを詰めますが、行の折り返しは行いません。</dd>
+ <dt><code>pre</code></dt>
+ <dd>連続するホワイトスペースはそのまま残され、行の折り返しは、ソース内の改行文字と、 {{HTMLElement("br")}} 要素でのみ行います。</dd>
+ <dt><code>pre-wrap</code></dt>
+ <dd>連続するホワイトスペースはそのまま残されます。行の折り返しは、改行文字や {{HTMLElement("br")}} 要素のあるときか、行ボックスを埋めるのに必要なときに行います。</dd>
+ <dt><code>pre-line</code></dt>
+ <dd>連続するホワイトスペースは詰められて 1 つになります。行の折り返しは、改行文字や {{HTMLElement("br")}} 要素のあるときか、行ボックスを埋めるのに必要なときに行われます。</dd>
+ <dt><code>break-spaces</code></dt>
+ <dd>下記の点を除いて、動作は <code>pre-wrap</code> と同じです。
+ <ul>
+  <li>そのまま残された連続するホワイトスペースは、行末にあるものを含め、空間を占有します。</li>
+  <li>残されたそれぞれのホワイトスペースの後で、ホワイトスペースの間を含め、改行する可能性があります。</li>
+  <li>そのような残された空白は空間を占有し、ぶら下がらず、ボックスの固有の寸法に (min-content size および max-content size に) 影響します。</li>
+ </ul>
+ </dd>
+</dl>
+
+<p>次の表に、<code>white-space</code> 値の動作をまとめます。</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th></th>
+   <th>改行</th>
+   <th>空白とタブ文字</th>
+   <th>テキストの折り返し</th>
+   <th>行末の空白</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <th><code>normal</code></th>
+   <td>まとめる</td>
+   <td>まとめる</td>
+   <td>折り返す</td>
+   <td>除去</td>
+  </tr>
+  <tr>
+   <th><code>nowrap</code></th>
+   <td>まとめる</td>
+   <td>まとめる</td>
+   <td>折り返さない</td>
+   <td>除去</td>
+  </tr>
+  <tr>
+   <th><code>pre</code></th>
+   <td>そのまま</td>
+   <td>そのまま</td>
+   <td>折り返さない</td>
+   <td>そのまま</td>
+  </tr>
+  <tr>
+   <th><code>pre-wrap</code></th>
+   <td>そのまま</td>
+   <td>そのまま</td>
+   <td>折り返す</td>
+   <td>ぶら下げ</td>
+  </tr>
+  <tr>
+   <th><code>pre-line</code></th>
+   <td>そのまま</td>
+   <td>まとめる</td>
+   <td>折り返す</td>
+   <td>除去</td>
+  </tr>
+  <tr>
+   <th><code>break-spaces</code></th>
+   <td>そのまま</td>
+   <td>そのまま</td>
+   <td>折り返す</td>
+   <td>折り返す</td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3>
+
+<pre class="syntaxbox">{{CSSSyntax}}</pre>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<h3 id="Basic_example" name="Basic_example">基本的な例</h3>
+
+<pre class="brush: css">code {
+  white-space: pre;
+}</pre>
+
+<h3 id="Line_breaks_inside_pre_elements" name="Line_breaks_inside_pre_elements">&lt;pre&gt; 要素内での改行</h3>
+
+<pre class="brush: css">pre {
+  word-wrap: break-word;      /* IE 5.5-7 */
+  white-space: pre-wrap;      /* 現行ブラウザー */
+}</pre>
+
+<h2 id="See_it_in_action" name="See_it_in_action">操作して確認する</h2>
+
+<div class="hidden" id="See_it_in_action_LiveSample">
+<pre class="brush: html">&lt;div id="css-code" class="box"&gt;
+  p { white-space:
+  &lt;select&gt;
+    &lt;option&gt;normal&lt;/option&gt;
+    &lt;option&gt;nowrap&lt;/option&gt;
+    &lt;option&gt;pre&lt;/option&gt;
+    &lt;option&gt;pre-wrap&lt;/option&gt;
+    &lt;option&gt;pre-line&lt;/option&gt;
+    &lt;option&gt;break-spaces&lt;/option&gt;
+  &lt;/select&gt; }
+&lt;/div&gt;
+&lt;div id="results" class="box"&gt;
+  &lt;p&gt;    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.&lt;/p&gt;
+&lt;/div&gt;</pre>
+
+<pre class="brush: css">.box {
+  width: 300px;
+  padding: 16px;
+  border-radius: 10px;
+}
+
+#css-code {
+  background-color: rgb(220, 220, 220);
+  font-size: 16px;
+  font-family: monospace;
+}
+
+#css-code select {
+  font-family: inherit;
+}
+
+#results {
+  background-color: rgb(230, 230, 230);
+  overflow-x: scroll;
+  height: 400px;
+  white-space: normal;
+  font-size: 14px;
+}</pre>
+
+<pre class="brush: js">var select  = document.querySelector("#css-code select");
+var results = document.querySelector("#results p");
+select.addEventListener("change", function(e) {
+  results.setAttribute("style", "white-space: "+e.target.value);
+})</pre>
+</div>
+
+<h3 id="Source" name="Source">ソース</h3>
+
+<pre class="brush: html">&lt;p&gt;    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.&lt;/p&gt;
+</pre>
+
+<h3 id="CSS_Result" name="CSS_Result">CSS を加えた結果</h3>
+
+<p>{{EmbedLiveSample("See_it_in_action_LiveSample", "100%", 500)}}</p>
+
+<h2 id="Specifications" name="Specifications">仕様書</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">仕様書</th>
+   <th scope="col">状態</th>
+   <th scope="col">備考</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS3 Text", "#propdef-white-space", "white-space")}}</td>
+   <td>{{Spec2("CSS3 Text")}}</td>
+   <td>折り返しアルゴリズムの詳細を記述。</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSS2.1", "text.html#white-space-prop", "white-space")}}</td>
+   <td>{{Spec2("CSS2.1")}}</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{CSSInfo}}</p>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
+
+<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div>
+
+<p>{{Compat("css.properties.white-space")}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li><em>内部での</em>折り返しを定義するプロパティ: {{CSSxRef("overflow-wrap")}}, {{CSSxRef("word-break")}}, {{CSSxRef("hyphens")}}</li>
+</ul>