cman.jp > WEBページ作成TOP > CSSリファレンス > 「ハイフネーションの利用」
WEBページ作成
広告
hyphens「単語途中の改行指定」
単語途中の改行指定は「word-break」「word-wrap」で指定できますが、単語の指定文字で改行を行う場合は「hyphens」を使用します。
単語内に「­」（ソフトハイフン）を入れると改行候補の位置となり、改行される場合は「-」（ハイフン）が表示されます。
改行の判定は言語依存されるため「lang="en"」などで言語の指定を行います。
ブラウザ毎に対応範囲が異なるため注意が必要です。
| CSS Ver. | 適用要素 | 継承 |
|---|---|---|
| 3.0 | 全て | 不可 |
広告
hyphensの指定方法
| 構文 | |
|---|---|
|
hyphens : [ none | manual | auto ]; |
|
| プロパティ | 意味 |
| hyphens: none; | 「­」が指定されていても改行候補として使用しません。 |
| hyphens: manual; | 「­」を改行候補として使用します。（デフォルト） |
| hyphens: auto; | 「­」は無視してブラウザが自動で改行します。 |
hyphens のサンプル
<style type="text/css">
#sample1-area{
word-break: normal;
word-wrap: normal;
}
#sample1-area > div{
display: inline-block;
width:105px;
border:1px solid #ccc;
margin: 1px;
vertical-align: top;
}
.hyphens_none { hyphens : none; }
.hyphens_manual { hyphens : manual; }
.hyphens_auto { hyphens : auto; }
</style>
<html>
<div lang="en" class="hyphens_none">
[none]<br>The new pragraph lo­cation is diff­erent depend­ing on browsers.
</div>
<div lang="en" class="hyphens_manual">
[manual]<br>The new paragraph lo­cation is diff­erent depend­ing on browsers.
</div>
<div lang="en" class="hyphens_auto">
[auto]<br>The new paragraph lo­cation is diff­erent depend­ing on browsers.
</div>
</html>
[none]
The new pragraph location is different depending on browsers.
The new pragraph location is different depending on browsers.
[manual]
The new paragraph location is different depending on browsers.
The new paragraph location is different depending on browsers.
[auto]
The new paragraph location is different depending on browsers.
The new paragraph location is different depending on browsers.
「hyphens」は主要ブラウザで対応範囲が異なるため、使用時には注意が必要です。
ベンダープレフィックスの使用
flexboxはCSS3で定義されています。このため、一部ブラウザによっては正常に動作しません。
対応状況→http://caniuse.com/#search=hyphens
このため、ベンダーフレックス「-webkit-」「-ms-」を利用した方が対応範囲が広がります。（上記サンプル参照）
| 関連するCSS(STYLE) | |
|---|---|
| letter-spacing | 文字の間隔 |
| white-space | 改行コード・タブ・スペースの表示 |
| word-break | 自動改行のルール |
| word-spacing | 単語の間隔 |
| word-wrap | 長い単語の改行ルール |
広告