このウェブサイトはご利用の端末での閲覧に対応していません。
This website does not support your device.

hyphens”プロパティ:ハイフネーションCSS3で追加

記事Nov. 20th,2020
ハイフネーションによって行を折り返すかを指定するプロパティ
この記事はCSS3に対応しています。
この記事はCSS3に対応しています。

プロパティについて

概要

初期値 hyphens: manual;
適用対象 インライン・ボックス
継承 Yes
パーセント値 パーセント値は指定できません
計算値 指定したキーワード
アニメーション 離散

hyphens”プロパティはハイフネーションによって単語途中で行を折り返すかを指定するプロパティです。

ハイフネーション

サンプルコード

p { hyphens: auto;}

説明
none ソフトハイフンによってハイフネーションの位置が示されている場合もハイフネーションを行わない (ソフトハイフンでない通常のハイフンの位置での改行規則による折り返しは妨げません。)
manual ソフトハイフンによってハイフネーションの位置が示されている場合だけハイフネーションを行う
auto ソフトハイフンによって示された箇所に加え、ユーザー・エージェントが選択したハイフネーションの規則に基づいて自動的にハイフネーションを行う (ソフトハイフンによってハイフネーションの位置が示されている場合は自動的なハイフネーションよりも優先されます。)
共通キーワード

ハイフネーションの位置の指定

ハイフネーションを行うべき位置を手動で指定したい場合は“ソフトハイフン”によって示すことができます。通常のハイフン(“‐”)はその部分で行が折り返されない場合でも表示されますが、ソフトハイフンはその位置で行を折り返す場合のみ表示され、そうでない場合は表示されません。ソフトハイフンはHTMLでは“­”で表すことができます。

hyphen­ate

仕様書

定義されている仕様書
Level 1 Level 2 Level 3 Level 4
勧告(REC) 勧告(REC) 勧告候補(CR) 作業草稿(WD)
hyphens
定義なし

定義なし

定義あり

定義あり
Level 1 Level 2 Level 3 Level 4
勧告(REC) 勧告(REC) 勧告候補(CR) 作業草稿(WD)
none
定義なし

定義なし

定義あり

定義あり
manual
定義なし

定義なし

定義あり

定義あり
auto
定義なし

定義なし

定義あり

定義あり

使用例

ハイフネーションを行わない

p { hyphens: none;}
<p>
This paragraph shows how "hyphenation" works with Cascading Style Sheets.
</p>
<p>
This par&shy;a&shy;graph shows how "hy&shy;phen&shy;a&shy;tion" works with Cas&shy;cading Style Sheets.
</p>

This paragraph shows how "hyphenation" works with Cascading Style Sheets.

This par­a­graph shows how "hy­phen­a­tion" works with Cas­cading Style Sheets.

手動でハイフネーションを行う

p { hyphens: manual;}
<p>
This paragraph shows how "hyphenation" works with Cascading Style Sheets.
</p>
<p>
This par&shy;a&shy;graph shows how "hy&shy;phen&shy;a&shy;tion" works with Cas&shy;cading Style Sheets.
</p>

This paragraph shows how "hyphenation" works with Cascading Style Sheets.

This par­a­graph shows how "hy­phen­a­tion" works with Cas­cading Style Sheets.

自動でハイフネーションを行う

p { hyphens: auto;}
<p>
This paragraph shows how "hyphenation" works with Cascading Style Sheets.
</p>
<p>
This par&shy;a&shy;graph shows how "hy&shy;phen&shy;a&shy;tion" works with Cas&shy;cading Style Sheets.
</p>

This paragraph shows how "hyphenation" works with Cascading Style Sheets.

This par­a­graph shows how "hy­phen­a­tion" works with Cas­cading Style Sheets.

一番上へ
トップにもどる
シェアする
シェアする
Facebookでシェアする
ツイート
Google+でシェア
Pocket
はてなブックマーク