【36】単語の途中で改行するとき自動でハイフンを付ける hyphens

最終更新日:2018年07月07日  (初回投稿日:2018年07月07日)

hyphensプロパティは、単語の途中で折り返す時に「ハイフン」をいれるかどうかを指定できます。
手動でソフトハイフン記号「­」を入れて、そこでハイフンを入れて折り返したり、ブラウザにおまかせで ハイフンを入れて折り返すこともできます。

ほとんどのブラウザが実装していますが、IE11, Edge はベンダープレフィックス「-ms-」が必要。Safari(iOS Safariも)は「-webkit-」が必要です。
Chrome は Android と Macプラットフォームでのみで実装だそうです。(2018年7月記)
参考:Can I Use | hyphens

本日のINDEX
  1. hyphensプロパティの値
    1. ハードハイフン記号・ソフトハイフン記号
    2. autoでは「lang属性」での言語の指定が必要です
  2. hyphensプロパティの指定サンプル
    1. ソフトハイフン記号によって manual でハイフン入りで改行されます
  3. hyphensプロパティの使いどころ

参考:
CSS Text Module Level 3 | W3C Working Draft
hyphens - CSS | MDN

hyphensプロパティの値

hyphensプロパティの値は すべてキーワードです。

hyphensプロパティの値
キーワード manual がデフォルト値。
none、auto
グローバル値 hyphens: inherit; 親の値を継承(コレ書かなくても継承するけど)
hyphens: initial; 継承した親の値を解消しデフォルト値に戻す
hyphens: unset; 値を解除。親から継承されてるなら inherit、継承されてないなら initial と同じ動作
値の継承 あり 適用できる要素 すべての要素

それぞれのキーワードは、以下の意味があります。

none
単語内でソフトハイフンがあっても折り返さず、ハイフンも付けません(単語を分割しない)。
行はホワイトスペースの位置でのみ折り返します。
「ソフトハイフン」についてはすぐ下で解説しています)
manual
単語内にソフトハイフンがある位置のみ、ハイフンを入れて改行します。
言わば 手動(マニュアル = manual)でハイフンを付けるんですが、そこで自然改行されなければハイフンは表示されません。
「ソフトハイフン」についてはすぐ下で解説しています)
auto
ブラウザのデフォルトのハイフネーションに従います。(ソフトハイフン不要)
ブラウザはハイフンを入れる時、その言語のルールを使うので HTMLの「lang属性」で、ハイフネーションのルールがある言語を指定しておく必要があります。

ハードハイフン記号・ソフトハイフン記号

ハイフン記号には ハードハイフン(‐)ソフトハイフン(­)があります。

ハードハイフン記号(‐)は可視(入れたところに必ずハイフンが表示)。
そこで自然改行できるなら、ハイフンの直後で改行されます。
そこで自然改行されなくても、ハイフンは入ったままです。

ソフトハイフン記号(­)は不可視で、自然改行できる位置にあれば、hyphens: manual で表示され、その直後で改行されます。
その位置で折り返しがされなければ、ハイフンは表示されません。

autoでは「lang属性」での言語の指定が必要です

hyphens: auto を使う場合は、ブラウザがハイフンを入れる時、その言語のルールに従うので、必ずその要素に「lang属性」ハイフネーションのルールがある言語を指定する必要があります。

特に日本語サイトの場合は、最初に <html lang="ja"> と html要素に日本語を指定しているのが普通ですが、これだと hyphens: auto は反応しません
テキストが外国語で、ハイフンを入れたければ、その要素に lang属性(lang="en" とか)を改めて指定すればOK。
例えば、<p lang="en">などと指定して、その <p>要素に hyphens: auto を指定すれば使えます。

hyphensプロパティの指定サンプル

hyphensプロパティの値をぜんぶ使ってみます。
ますは、ソフトハイフン記号無しのサンプルです。
hyphens: auto では「lang属性」でハイフンを使う言語の指定が必要。サンプルの3番目は「lang="en"」あり、4番目は無し(このサイトの <html lang="ja"> のまま)にしています。

3番目の「lang属性ありの hyphens: auto」だけ ハイフンがついていますね。

hyphens: none This property controls whether hyphenation is allowed to create more soft wrap opportunities within a line of text.
hyphens: manual This property controls whether hyphenation is allowed to create more soft wrap opportunities within a line of text.
hyphens: auto (lang) This property controls whether hyphenation is allowed to create more soft wrap opportunities within a line of text.
hyphens: auto (No lang) This property controls whether hyphenation is allowed to create more soft wrap opportunities within a line of text.

サンプルのソースコードはこちら。hyphensプロパティは HTMLに直接指定しています。

<div style="-ms-hyphens:none; -webkit-hyphens:none; hyphens:none">
<b>hyphens: none</b>
This property controls whether hyphenation is allowed to 
create more soft wrap opportunities within a line of text.
</div>

<div style=""-ms-hyphens:manual; -webkit-hyphens:manual; hyphens:manual">
<b>hyphens: manual</b>
This property controls whether hyphenation is allowed to 
create more soft wrap opportunities within a line of text.
</div>

<div lang="en" style="-ms-hyphens:auto; -webkit-hyphens:auto; hyphens:auto"> <!--lang属性を指定-->
<b>hyphens: auto (lang)</b>
This property controls whether hyphenation is allowed to 
create more soft wrap opportunities within a line of text.
</div>

<div style="-ms-hyphens:auto; -webkit-hyphens:auto; hyphens:auto"> <!--lang属性を指定していません-->
<b>hyphens: auto (No lang)</b>
This property controls whether hyphenation is allowed to 
create more soft wrap opportunities within a line of text.
</div>

ソフトハイフン記号によって manual でハイフン入りで改行されます

hyphens: manualを使うときは、テキスト入力時に、手動でソフトハイフン記号「&shy;」を入れます。
サンプルでは、あえて lang属性を使っていません。ソフトハイフン記号を使ったら Lang属性がなくても機能します。
(ただし、hyphensプロパティは lang属性と一緒に使うことが推奨されているそうです)

比較のため hyphens: none にもソフトハイフン記号を入れてみました。noneでは不可視のままですね。

hyphens: none This prop­erty con­trols whether hy­phenation is allowed to create more soft wrap opportuni­ties within a line of text.
hyphens: manual This prop­erty con­trols whether hy­phenation is allowed to create more soft wrap opportuni­ties within a line of text.

サンプルのソースコードはこちら。

<div style="-ms-hyphens:none; -webkit-hyphens:none; hyphens:none">
<b>hyphens: none</b>
This prop&shy;erty con&shy;trols whether hy&shy;phenation is allowed to 
create more soft wrap opportuni&shy;ties within a line of text.
</div>

<div style="-ms-hyphens:manual; -webkit-hyphens:manual; hyphens:manual">
<b>hyphens: manual</b>
This prop&shy;erty con&shy;trols whether hy&shy;phenation is allowed to 
create more soft wrap opportuni&shy;ties within a line of text.
</div>

hyphensプロパティの使いどころ

日本語では、折り返しにハイフンを付けないので無関係。

CJK以外の言語では、overflow-wrap(word-wrap):break-word は、単語を折り返してはくれますが、ハイフンは付けてくれないので、便利さで言えば hyphensプロパティ 一択になりそう。
auto を使えば、ブラウザが勝手にハイフンを付けて折り返してくれるので便利。

厳密にやりたければソフトハイフン記号さえ付けておけばOK。
hyphensプロパティを指定しなくても、ブラウザがハイフンを付けて折り返します。(hyphensプロパティのデフォルト値が「manual」だから)

ただ、hyphensプロパティは、いわゆる CSS3 からの新し目のプロパティなので、どのブラウザでも使えるという訳にはいかないのが現状。(2018年7月記)
早くベンダープレフィックス無しで全部のブラウザに実装されるといいですね。

次回予告

さて次回は、white-spaceプロパティを使おう。
これは、「半角スペース」や「タブスペース」などの 空白(ホワイトスペース)を、どう表示するかを指定します。

この記事をはてなブックマークに追加

やる気を保つためにランキングに参加しています。
応援してくださると すっごいやる気を出します! (笑)

関連記事

初心者にも使いやすい(と思う)レンタルサーバー

「レンタルサーバーはどこがいい?」とご質問をよくいただきますが、自分でも使っていてオススメなのは スターサーバー (ミニバードがスターサーバになりました)。管理画面がわかりやすくていい感じす。
仕事で使ってるロリポップ!もわかりやすい管理画面で、初めてでもすんなり使えます。
両方とも、なんといっても料金が安いです。

ちょっと料金は高いけど、高スペックでコスパが良く、信頼性も高いサーバといえば、やはりさくらのレンタルサーバと、エックスサーバー 。この2つは老舗でユーザーも多いので、質問する場がたくさんあり、初心者の方でもイケるだろうと思います。

スポンサーリンク

スポンサーリンク
最新記事
Category
オススメの本
Links
Calendar
06 | 2018/07 | 08
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 - - - -
Archive
RSS Link
Profile

yuki★hata

Author : yuki★hata
せめて月1回の更新をめざします~。

メールフォームはこちら

スポンサーリンク
スポンサーリンク
Copyright © ほんっとにはじめてのHTML5とCSS3 All Rights Reserved.