diff options
Diffstat (limited to 'files/ja/web/css/overflow-wrap/index.html')
| -rw-r--r-- | files/ja/web/css/overflow-wrap/index.html | 146 |
1 files changed, 146 insertions, 0 deletions
diff --git a/files/ja/web/css/overflow-wrap/index.html b/files/ja/web/css/overflow-wrap/index.html new file mode 100644 index 0000000000..8146dc3060 --- /dev/null +++ b/files/ja/web/css/overflow-wrap/index.html @@ -0,0 +1,146 @@ +--- +title: overflow-wrap +slug: Web/CSS/overflow-wrap +tags: + - CSS + - CSS テキスト + - CSS プロパティ + - Reference +translation_of: Web/CSS/overflow-wrap +--- +<div>{{CSSRef}}</div> + +<p><code><strong>overflow-wrap</strong></code> は <a href="/ja/docs/Web/CSS">CSS</a> のプロパティで、インライン要素に対して、テキストが行ボックスをあふれないように、ブラウザーが不可分の文字列の途中で改行を入れるかどうかの設定を適用します。</p> + +<div>{{EmbedInteractiveExample("pages/css/overflow-wrap.html")}}</div> + +<p class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</p> + +<div class="note"> +<p><strong>メモ:</strong> {{cssxref("word-break")}} とは対照的に、 <code>overflow-wrap</code> は単語全体があふれずに行内に配置できない場合にのみ、改行を生成します。</p> +</div> + +<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">/* キーワード値 */ +overflow-wrap: normal; +overflow-wrap: break-word; +overflow-wrap: anywhere; + +/* グローバル値 */ +overflow-wrap: inherit; +overflow-wrap: initial; +overflow-wrap: unset; +</pre> + +<p><code>overflow-wrap</code> プロパティは、下記の値一覧中の一つのキーワードで指定します。</p> + +<h3 id="Values" name="Values">値</h3> + +<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> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<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"><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> +</pre> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css">p { + width: 13em; + margin: 2px; + background: gold; +} + +.ow-anywhere { + overflow-wrap: anywhere; +} + +.ow-break-word { + overflow-wrap: break-word; +} + +.word-break { + word-break: break-all; +} + +.hyphens { + hyphens: auto; +} +</pre> + +<h3 id="Result" name="Result">結果</h3> + +<p>{{ EmbedLiveSample('Example', '100%', 260) }}</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-overflow-wrap', 'overflow-wrap') }}</td> + <td>{{ Spec2('CSS3 Text') }}</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.overflow-wrap")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>{{cssxref("word-break")}}</li> + <li>{{cssxref("hyphens")}}</li> + <li>{{cssxref("text-overflow")}}</li> +</ul> |