blob: 09965ce859df0e7a1352788eb781aadbb1d4debd (
plain)
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
147
148
149
150
151
152
153
154
|
---
title: hyphens
slug: Web/CSS/hyphens
tags:
- CSS
- CSS Property
- CSS テキスト
- CSS プロパティ
- CSS 文字列
- Reference
translation_of: Web/CSS/hyphens
---
<div>{{CSSRef}}</div>
<p><span class="seoSummary"><strong><code>hyphens</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> のプロパティで、文字列を複数行にわたって折り返す際に、単語のハイフネーションを行う方法を指定します。</span>ハイフネーションをまったく行わなかったり、手動で指定された位置で文字列のハイフネーションを行ったり、ブラウザーに適切な位置にハイフンを挿入させたりすることができます。</p>
<div>{{EmbedInteractiveExample("pages/css/hyphens.html")}}</div>
<div class="hidden">この対話型サンプルのソースファイルは GitHub リポジトリに格納されています。対話型サンプルプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</div>
<p>ハイフネーションの規則は言語に依存します。 HTML では言語は <code><a href="/ja/docs/Web/HTML/Global_attributes/lang">lang</a></code> 属性で特定され、ブラウザーはこの属性が存在し、適切なハイフネーション辞書が利用できる場合にのみハイフネーションを行います。 XML では、 <code><a href="/ja/docs/Web/SVG/Attribute/xml:lang">xml:lang</a></code> 属性を使用する必要があります。</p>
<div class="note">
<p><strong>注:</strong> どのようにハイフネーションを行うかの規則は仕様書で明確に定義されていないため、厳密なハイフネーションの方式はブラウザーにより異なります。</p>
</div>
<h2 id="Syntax" name="Syntax">構文</h2>
<pre class="brush:css no-line-numbers notranslate">/* キーワード値 */
hyphens: none;
hyphens: manual;
hyphens: auto;
/* グローバル値 */
hyphens: inherit;
hyphens: initial;
hyphens: unset;
</pre>
<p><code>hyphens</code> プロパティは、以下に挙げたキーワード値のうちの一つで指定します。</p>
<h3 id="Values" name="Values">値</h3>
<dl>
<dt><code>none</code></dt>
<dd>単語内で分割が提案されている文字の位置であっても、改行で単語を分割しません。行はホワイトスペースの位置のみで折り返します。</dd>
<dt><code>manual</code></dt>
<dd>単語内で分割が提案されている文字の位置でのみ、行の折り返しで単語を分割します。詳しくは{{anch("Suggesting line break opportunities", "改行候補位置の提案")}}を参照してください。</dd>
<dt><code>auto</code></dt>
<dd>ブラウザーは自身が選択した規則に従って、ハイフネーションを行うのに適切な位置で自動的に単語を分割します。しかし、改行候補位置（{{anch("Suggesting line break opportunities", "改行候補位置の提案")}}を参照）があれば、自動的な改行位置の選択を上書きします。</dd>
</dl>
<div class="note">
<p><strong>メモ:</strong> <code>auto</code> を設定したときの動作は、正しくタグ付けされた言語に依存して、適切なハイフネーション規則が選択されます。選択した言語で自動的なハイフネーションが適用されるようにすることを保証するために、 HTML の <code>lang</code> 属性を必ず指定してください。</p>
</div>
<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3>
{{csssyntax}}
<h2 id="Suggesting_line_break_opportunities" name="Suggesting_line_break_opportunities">改行候補位置の提案</h2>
<p>文字列中で改行が可能な位置を手動で指定するために使用できる Unicode 文字は2つあります。</p>
<dl>
<dt>U+2010 (HYPHEN)</dt>
<dd>「ハード」ハイフン文字は、目に見える改行候補位置を示します。実際はその位置で改行されない場合でも、ハイフンが表示されます。</dd>
<dt>U+00AD (SHY)</dt>
<dd>不可視の「ソフト」ハイフン ("<strong>s</strong>oft" <strong>hy</strong>phen) です。この文字は表示されませんが、ブラウザーが必要に応じて単語を分割できる位置を示します。 HTML では、 <code>&shy;</code> を使用してソフトハイフンを挿入することができます。</dd>
</dl>
<div class="blockIndicator note">
<p>HTML の {{htmlelement("wbr")}} 要素によって改行が行われた場合、ハイフンは挿入されません。</p>
</div>
<h2 id="Example" name="Example">例</h2>
<p>以下の例では3つのクラスを使用し、それぞれの <code>hyphens</code> プロパティの設定を示します。</p>
<h3 id="HTML">HTML</h3>
<pre class="brush: html notranslate"><dl>
<dt><code>none</code>: no hyphen; overflow if needed</dt>
<dd lang="en" class="none">An extreme&shy;ly long English word</dd>
<dt><code>manual</code>: hyphen only at &amp;hyphen; or &amp;shy; (if needed)</dt>
<dd lang="en" class="manual">An extreme&shy;ly long English word</dd>
<dt><code>auto</code>: hyphens where the algorithm decides (if needed)</dt>
<dd lang="en" class="auto">An extreme&shy;ly long English word</dd>
</dl>
</pre>
<h3 id="CSS">CSS</h3>
<pre class="brush: css notranslate">dd {
width: 55px;
border: 1px solid black;
}
dd.none {
-webkit-hyphens: none;
-ms-hyphens: none;
hyphens: none;
}
dd.manual {
-webkit-hyphens: manual;
-ms-hyphens: manual;
hyphens: manual;
}
dd.auto {
-webkit-hyphens: auto;
-ms-hyphens: auto;
hyphens: auto;
}
</pre>
<h3 id="Result" name="Result">結果</h3>
<figure>
<p>{{EmbedLiveSample("Example", "100%", 490)}}</p>
</figure>
<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", "#hyphens-property", "hyphens")}}</td>
<td>{{Spec2("CSS3 Text")}}</td>
<td>初回定義。</td>
</tr>
</tbody>
</table>
<p>{{cssinfo}}</p>
<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
<div>
<p>{{Compat("css.properties.hyphens")}}</p>
</div>
<h2 id="See_also" name="See_also">関連情報</h2>
<ul>
<li>{{Cssxref("content")}}</li>
<li>{{cssxref("overflow-wrap")}} (旧 <code>word-wrap</code>)</li>
<li>{{cssxref("word-break")}}</li>
</ul>
|
