1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
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>
|
