CSS Text モジュールの文書を更新

- 2021/08/13 時点の英語版に同期
- Web/CSS/CSS_Text/Wrapping_Text を新規翻訳

1 files changed, 73 insertions, 85 deletions

diff --git a/files/ja/web/css/overflow-wrap/index.md b/files/ja/web/css/overflow-wrap/index.md
index 3d7387d243..9c76cd9af0 100644
--- a/files/ja/web/css/overflow-wrap/index.md
+++ b/files/ja/web/css/overflow-wrap/index.md
@@ -6,25 +6,24 @@ tags:
   - CSS テキスト
   - CSS プロパティ
   - Reference
+  - recipe:css-property
+browser-compat: css.properties.overflow-wrap
 translation_of: Web/CSS/overflow-wrap
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p><code><strong>overflow-wrap</strong></code> は <a href="/ja/docs/Web/CSS">CSS</a> のプロパティで、インライン要素に対して、テキストが行ボックスをあふれないように、ブラウザーが不可分の文字列の途中で改行を入れるかどうかの設定を適用します。</p>
+**`overflow-wrap`** は [CSS](/ja/docs/Web/CSS) のプロパティで、インライン要素に対して、テキストが行ボックスをあふれないように、ブラウザーが分割できない文字列の途中で改行を入れるかどうかの設定を適用します。
 
-<div>{{EmbedInteractiveExample("pages/css/overflow-wrap.html")}}</div>
+{{EmbedInteractiveExample("pages/css/overflow-wrap.html")}}
 
-<p class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</p>
+> **Note:** {{cssxref("word-break")}} とは対照的に、 `overflow-wrap` は単語全体があふれずに行内に配置できない場合にのみ、改行を生成します。
 
-<div class="note">
-<p><strong>メモ:</strong> {{cssxref("word-break")}} とは対照的に、 <code>overflow-wrap</code> は単語全体があふれずに行内に配置できない場合にのみ、改行を生成します。</p>
-</div>
+このプロパティはもともと、標準外かつ接頭辞のない `word-wrap` と呼ばれる Microsoft 拡張であり、多くのブラウザーはこの名前で実装していました。 `overflow-wrap` に改名されたため、 `word-wrap` は別名になりました。
 
-<p>このプロパティはもともと、標準外かつ接頭辞のない <code>word-wrap</code> と呼ばれる Microsoft 拡張であり、多くのブラウザーはこの名前で実装していました。 <code>overflow-wrap</code> に改名されたため、 <code>word-wrap</code> は別名になりました。</p>
+## 構文
 
-<h2 id="Syntax" name="Syntax">構文</h2>
-
-<pre class="brush:css">/* キーワード値 */
+```css
+/* キーワード値 */
 overflow-wrap: normal;
 overflow-wrap: break-word;
 overflow-wrap: anywhere;
@@ -32,58 +31,65 @@ overflow-wrap: anywhere;
 /* グローバル値 */
 overflow-wrap: inherit;
 overflow-wrap: initial;
+overflow-wrap: revert;
 overflow-wrap: unset;
-</pre>
+```
+
+`overflow-wrap` プロパティは、以下のうちの一つのキーワードで指定します。
 
-<p><code>overflow-wrap</code> プロパティは、下記の値一覧中の一つのキーワードで指定します。</p>
+### 値
 
-<h3 id="Values" name="Values">値</h3>
+- `normal`
+  - : 通常の単語の分割位置 (2 つの単語の間の空白など) でのみ改行することを示します。
+- `anywhere`
+  - : あふれることを避けるために、行内にその他の分割可能な位置がない場合、その他の分割できない文字列 — 長い単語や URL — が任意の場所で分割されることがあります。分割位置にハイフン文字は挿入されません。コンテンツの最小固有寸法を計算する時には、単語分割によって導入された折り返し可能位置が考慮されます。
+- `break-word`
+  - : `anywhere` の値と同様に、行内にその他の分割可能な位置がない場合、通常は分割可能でない単語が任意の場所で分割されますが、コンテンツの最小固有寸法を計算する時に、単語分割によって導入された折り返し可能位置が考慮されません。
 
-<dl>
- <dt><code>normal</code></dt>
- <dd>通常の単語の分割位置 (2つの単語の間の空白など) でのみ改行することを示します。</dd>
- <dt><code>anywhere</code></dt>
- <dd>あふれることを避けるために、行内にその他の分割可能な位置がない場合、その他の分割できない文字列 — 長い単語や URL — が任意の場所で分割されることがあります。分割位置にハイフン文字は挿入されません。コンテンツの最小固有寸法を計算する時には、単語分割によって導入された折り返し可能位置が考慮されます。</dd>
- <dt><code>break-word</code></dt>
- <dd><code>anywhere</code> の値と同様に、行内にその他の分割可能な位置がない場合、通常は分割可能でない単語が任意の場所で分割されますが、コンテンツの最小固有寸法を計算する時に、単語分割によって導入された折り返し可能位置が考慮されません。</dd>
-</dl>
+## 公式定義
 
-<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3>
+{{cssinfo}}
+
+## 形式文法
 
 {{csssyntax}}
 
-<h2 id="Example" name="Example">例</h2>
-
-<p>この例は、長い単語が分割されるときの <code>overflow-wrap</code>, <code>word-break</code>, and <code>hyphens</code> の結果を比較するものです。</p>
-
-<h3 id="HTML">HTML</h3>
-
-<pre class="brush: html">&lt;p&gt;They say the fishing is excellent at
-  Lake &lt;em class="normal"&gt;Chargoggagoggmanchauggagoggchaubunagungamaugg&lt;/em&gt;,
-  though I've never been there myself. (&lt;code&gt;normal&lt;/code&gt;)&lt;/p&gt;
-&lt;p&gt;They say the fishing is excellent at
-  Lake &lt;em class="ow-anywhere"&gt;Chargoggagoggmanchauggagoggchaubunagungamaugg&lt;/em&gt;,
-  though I've never been there myself. (&lt;code&gt;overflow-wrap: anywhere&lt;/code&gt;)&lt;/p&gt;
-&lt;p&gt;They say the fishing is excellent at
-  Lake &lt;em class="ow-break-word"&gt;Chargoggagoggmanchauggagoggchaubunagungamaugg&lt;/em&gt;,
-  though I've never been there myself. (&lt;code&gt;overflow-wrap: break-word&lt;/code&gt;)&lt;/p&gt;
-&lt;p&gt;They say the fishing is excellent at
-  Lake &lt;em class="word-break"&gt;Chargoggagoggmanchauggagoggchaubunagungamaugg&lt;/em&gt;,
-  though I've never been there myself. (&lt;code&gt;word-break&lt;/code&gt;)&lt;/p&gt;
-&lt;p&gt;They say the fishing is excellent at
-  Lake &lt;em class="hyphens"&gt;Chargoggagoggmanchauggagoggchaubunagungamaugg&lt;/em&gt;,
-  though I've never been there myself. (&lt;code&gt;hyphens&lt;/code&gt;, without &lt;code&gt;lang&lt;/code&gt; attribute)&lt;/p&gt;
-&lt;p lang="en"&gt;They say the fishing is excellent at
-  Lake &lt;em class="hyphens"&gt;Chargoggagoggmanchauggagoggchaubunagungamaugg&lt;/em&gt;,
-  though I've never been there myself. (&lt;code&gt;hyphens&lt;/code&gt;, English rules)&lt;/p&gt;
-&lt;p class="hyphens" lang="de"&gt;They say the fishing is excellent at
-  Lake &lt;em class="hyphens"&gt;Chargoggagoggmanchauggagoggchaubunagungamaugg&lt;/em&gt;,
-  though I've never been there myself. (&lt;code&gt;hyphens&lt;/code&gt;, German rules)&lt;/p&gt;
-</pre>
-
-<h3 id="CSS">CSS</h3>
-
-<pre class="brush: css">p {
+## 例
+
+<h3 id="Comparing_overflow-wrap_word-break_and_hyphens">overflow-wrap, word-break, hyphens の比較</h3>
+
+この例は、長い単語が分割されるときの `overflow-wrap`, `word-break`, `hyphens` の結果を比較するものです。
+
+#### HTML
+
+```html
+<p>They say the fishing is excellent at
+  Lake <em class="normal">Chargoggagoggmanchauggagoggchaubunagungamaugg</em>,
+  though I've never been there myself. (<code>normal</code>)</p>
+<p>They say the fishing is excellent at
+  Lake <em class="ow-anywhere">Chargoggagoggmanchauggagoggchaubunagungamaugg</em>,
+  though I've never been there myself. (<code>overflow-wrap: anywhere</code>)</p>
+<p>They say the fishing is excellent at
+  Lake <em class="ow-break-word">Chargoggagoggmanchauggagoggchaubunagungamaugg</em>,
+  though I've never been there myself. (<code>overflow-wrap: break-word</code>)</p>
+<p>They say the fishing is excellent at
+  Lake <em class="word-break">Chargoggagoggmanchauggagoggchaubunagungamaugg</em>,
+  though I've never been there myself. (<code>word-break</code>)</p>
+<p>They say the fishing is excellent at
+  Lake <em class="hyphens">Chargoggagoggmanchauggagoggchaubunagungamaugg</em>,
+  though I've never been there myself. (<code>hyphens</code>, without <code>lang</code> attribute)</p>
+<p lang="en">They say the fishing is excellent at
+  Lake <em class="hyphens">Chargoggagoggmanchauggagoggchaubunagungamaugg</em>,
+  though I've never been there myself. (<code>hyphens</code>, English rules)</p>
+<p class="hyphens" lang="de">They say the fishing is excellent at
+  Lake <em class="hyphens">Chargoggagoggmanchauggagoggchaubunagungamaugg</em>,
+  though I've never been there myself. (<code>hyphens</code>, German rules)</p>
+```
+
+#### CSS
+
+```css
+p {
    width: 13em;
    margin: 2px;
    background: gold;
@@ -104,41 +110,23 @@ overflow-wrap: unset;
 .hyphens {
    hyphens: auto;
 }
-</pre>
-
-<h3 id="Result" name="Result">結果</h3>
+```
 
-<p>{{ EmbedLiveSample('Example', '100%', 260) }}</p>
+#### 例
 
-<h2 id="Specifications" name="Specifications">仕様書</h2>
+{{ EmbedLiveSample('Comparing_overflow-wrap_word-break_and_hyphens', '100%', 260) }}
 
-<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-overflow-wrap', 'overflow-wrap') }}</td>
-   <td>{{ Spec2('CSS3 Text') }}</td>
-   <td>初回定義</td>
-  </tr>
- </tbody>
-</table>
+## 仕様書
 
-<p>{{cssinfo}}</p>
+{{Specifications}}
 
-<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
+## ブラウザーの互換性
 
-<p>{{Compat("css.properties.overflow-wrap")}}</p>
+{{Compat}}
 
-<h2 id="See_also" name="See_also">関連情報</h2>
+## 関連情報
 
-<ul>
- <li>{{cssxref("word-break")}}</li>
- <li>{{cssxref("hyphens")}}</li>
- <li>{{cssxref("text-overflow")}}</li>
-</ul>
+- {{cssxref("word-break")}}
+- {{cssxref("hyphens")}}
+- {{cssxref("text-overflow")}}
+- [テキストの分割と折り返しのガイド](/ja/docs/Web/CSS/CSS_Text/Wrapping_Text)