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

hyphens:ハイフネーションによる単語途中での改行CSS3で追加

記事Nov. 20th,2020
ハイフネーションによる単語途中での改行を行うかを指定するプロパティ
この記事はCSS3に対応しています。
この記事はCSS3に対応しています。

プロパティについて

概要

初期値 hyphens: manual;
適用対象 インライン・ボックス
継承 する
パーセント値 パーセント値は指定できません

hyphens”プロパティはハイフネーションによる単語途中での改行を行うかを指定するプロパティです。

サンプルコード

p { hyphens: auto;}

“ハイフネーション”とは?

ハイフネーション”は主に英語などの欧文で行に収まりきらない単語を途中にハイフン(“‐”)を挿入して改行することです。

hyphen-
ate

英語などの欧文の改行規則では通常単語の途中での改行が禁止され、行に収まりきらない単語は次の行に丸ごと送られます。しかし、その単語がとても長い単語だった場合、次の行に送られた単語の分だけその行は文字数が少なくなり、行末が不揃いになったり、両端揃えにしたとしても単語の間隔が不自然に長くなる場合があります。ハイフネーションを行って長い単語を途中で改行できるようにすることで文章の見栄えを改善することができます。

なお、どこでも単語途中で改行することができるというわけではなく、ハイフネーションの規則が決められています。

ハイフネーションの規則は言語によって異なり、同じ言語でも地域によって異なる場合があります。例えば、アメリカ英語では音節、イギリス英語ではその単語の語源によってハイフンを挿入して単語を分割する箇所が決められます。また、言語によってはハイフネーションによって単語の綴りが変わります。

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

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

hyphen­ate

説明
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
はてなブックマーク