CSS Reference
hyphens
ハイフネーションの方法を指定する
hyphens
プロパティは、単語のハイフネーションを行う方法を指定します。
ハイフネーション(hyphenation)とは、英単語など、通常はその途中で改行などによって分割することが許されていない単語を、段落の都合などで分割しなければならない場合にそれを行うための仕組みです。
通常はハイフン(-
/ U+2010
)を改行位置に挿入することで、それがひと続きの単語であることを示します。
日本語のように単語の途中でも改行することができる言語においては利用機会はないですが、英語をはじめ、欧文でテキストを記述する場合には利用する可能性が高いプロパティです。
なお、ハイフネーションはあくまで表示上の効果のみで、ハイフネーションが文書の内容(例えば読み上げや、テキストの選択、あるいは検索など)には影響しないようになっています。
hyphens
プロパティに指定できる値は下記の通りです。
none |
単語はハイフネーションされません。つまり、単語の途中では改行されず、常に空白文字の位置で改行されることになります。 |
---|---|
manual |
ハイフネーションの機会を明示的に示唆する文字が単語内にある場合のみ、単語はハイフネーションされます。ユーザーエージェントは、言語ごとに固有の、適切なハイフネーション文字を使用し、ハイフネーションを行うことが求められます。(既定値) |
auto |
ハイフネーションの機会を明示的に示唆する文字が単語内にある場合、もしくは、ユーザーエージェントによって決定された、その言語に適したハイフネーション機会がある場合に、単語はハイフネーションされます。 ハイフネーションの機会を明示的に示唆する文字が単語内にある場合はその位置が優先されます。ハイフネーションの機会を明示的に示唆する文字が単語内がない場合、あるいはそれだけではハイフネーション機会が足りない場合は、ユーザーエージェントが決めたハイフネーション機会でもハイフネーションが行われます。 |
ハイフネーションの機会を明示的に示唆する文字とは
ハイフネーションを単語内のどの位置で行うかは、言語ごとにユーザーエージェント(ブラウザ)が決定しますが、制作者側で明示的にハイフネーション機会を指定することもできます。
Unicode においてハイフネーション機会の明示に利用できる文字は、U+00AD
(ソフトハイフン)、もしくは U+2010
(ハードハイフン)の2文字です。
ハードハイフンはハイフン(-
)をそのまま記述することになるため、ハイフネーションが行われない場合でもハイフンは表示されてしまいますから、通常、ハイフネーション機会の明示が必要な場合はソフトハイフンを使用します。HTML においては、文字参照 ­
を単語内の任意の箇所に記述することで、ハイフネーション機会を明示することができます。
例えば ex­ample
のように記述すると、「example」という英単語の、「ex」と「ample」の間にハイフネーション機会が明示されます。
hyphensの仕様
- 初期値
-
- manual
- 対象となる要素
-
- テキスト
- 継承
-
- あり
hyphensのサンプルソース
hyphens: none; hyphens: manual; hyphens: auto;
主要ブラウザの対応
IE11 | ○-ms- |
---|---|
Edge(EdgeHTML) | ○-ms- |
Edge(Chromium) | ○ |
Chrome | ○ |
Firefox | ○ |
Safari | ○ |
iOS Safari | ○ |
Android Chrome | ○ |
関連するプロパティ
- white-space-collapse
- text-wrap-style
- text-wrap-mode
- text-wrap
- hyphenate-character
- text-spacing-trim
- font-palette
- font-variant-position
- font-variation-settings
- font-synthesis
- font-synthesis-style
- font-synthesis-weight
- font-synthesis-small-caps
- font-synthesis-position
- font-optical-sizing
- text-underline-offset
用途から CSS プロパティやセレクタを探す
用途から CSS プロパティやセレクタを逆引きできます。
- 疑似クラス
-
- :active
- :any-link
- :checked
- :default
- :defined
- :disabled
- :empty
- :enabled
- :first
- :first-child
- :first-of-type
- :focus
- :focus-visible
- :focus-within
- :fullscreen
- :has()
- :host
- :hover
- :in-range
- :indeterminate
- :invalid
- :is()
- :lang()
- :last-child
- :last-of-type
- :left
- :link
- :not()
- :nth-child()
- :nth-last-child()
- :nth-last-of-type()
- :nth-of-type()
- :only-child
- :only-of-type
- :optional
- :out-of-range
- :placeholder-shown
- :read-only
- :read-write
- :required
- :right
- :root
- :scope
- :state()
- :target
- :valid
- :visited
- :where()
- CSS関数
-
- acos()
- asin()
- atan()
- atan2()
- attr()
- brightness()
- calc()
- calc-size()
- circle()
- clamp()
- color()
- color-mix()
- cos()
- device-cmyk()
- drop-shadow()
- ellipse()
- env()
- exp()
- grayscale()
- hue-rotate()
- hypot()
- inset()
- invert()
- log()
- max()
- min()
- minmax()
- mod()
- polygon()
- pow()
- rem()
- round()
- saturate()
- sepia()
- sin()
- sqrt()
- tan()
- フォント・テキスト
-
- font-optical-sizing
- font-palette
- font-synthesis
- font-synthesis-position
- font-synthesis-small-caps
- font-synthesis-style
- font-synthesis-weight
- font-variant-position
- font-variation-settings
- hyphenate-character
- hyphens
- text-spacing-trim
- text-underline-offset
- text-wrap
- text-wrap-mode
- text-wrap-style
- white-space-collapse
対応ブラウザから CSS プロパティやセレクタを探す
対応ブラウザから CSS プロパティやセレクタを逆引きできます。
- IE11
-
- ::after
- ::backdrop
- ::before
- ::first-letter
- ::first-line
- ::selection
- :active
- :checked
- :disabled
- :empty
- :enabled
- :first
- :first-child
- :first-of-type
- :focus
- :fullscreen
- :hover
- :indeterminate
- :invalid
- :lang()
- :last-child
- :last-of-type
- :left
- :link
- :not()
- :nth-child()
- :nth-last-child()
- :nth-last-of-type()
- :nth-of-type()
- :only-child
- :only-of-type
- :optional
- :placeholder-shown
- :required
- :right
- :root
- :target
- :valid
- :visited
- @charset
- @keyframes
- @namespace
- @page
- ID セレクタ
- attr()
- background
- background-color
- calc()
- hyphens
- user-select
- クラスセレクタ
- タイプセレクタ
- ユニバーサルセレクタ
- 子セレクタ
- 子孫セレクタ
- 属性セレクタ
- 間接セレクタ
- 隣接セレクタ
- Edge(EdgeHTML)
-
- ::after
- ::backdrop
- ::before
- ::first-letter
- ::first-line
- ::placeholder
- ::selection
- :active
- :checked
- :disabled
- :empty
- :enabled
- :first
- :first-child
- :first-of-type
- :focus
- :fullscreen
- :hover
- :in-range
- :indeterminate
- :invalid
- :lang()
- :last-child
- :last-of-type
- :left
- :link
- :not()
- :nth-child()
- :nth-last-child()
- :nth-last-of-type()
- :nth-of-type()
- :only-child
- :only-of-type
- :optional
- :out-of-range
- :read-only
- :read-write
- :required
- :right
- :root
- :target
- :valid
- :visited
- @charset
- @keyframes
- @namespace
- @page
- @supports
- ID セレクタ
- attr()
- background
- background-color
- brightness()
- calc()
- drop-shadow()
- grayscale()
- hue-rotate()
- hyphens
- invert()
- minmax()
- prefers-color-scheme
- quotes
- saturate()
- sepia()
- transition-behavior
- user-select
- クラスセレクタ
- タイプセレクタ
- ユニバーサルセレクタ
- 子セレクタ
- 子孫セレクタ
- 属性セレクタ
- 間接セレクタ
- 隣接セレクタ
- Edge(Chromium)
-
- ::after
- ::backdrop
- ::before
- ::cue
- ::file-selector-button
- ::first-letter
- ::first-line
- ::marker
- ::part()
- ::placeholder
- ::selection
- ::slotted()
- :active
- :any-link
- :checked
- :default
- :defined
- :disabled
- :empty
- :enabled
- :first
- :first-child
- :first-of-type
- :focus
- :focus-visible
- :focus-within
- :fullscreen
- :has()
- :host
- :hover
- :in-range
- :indeterminate
- :invalid
- :lang()
- :last-child
- :last-of-type
- :left
- :link
- :not()
- :nth-child()
- :nth-last-child()
- :nth-last-of-type()
- :nth-of-type()
- :only-child
- :only-of-type
- :optional
- :out-of-range
- :placeholder-shown
- :read-only
- :read-write
- :required
- :right
- :root
- :scope
- :state()
- :target
- :valid
- :visited
- @charset
- @color-profile
- @container
- @counter-style
- @font-feature-values
- @font-palette-values
- @keyframes
- @layer
- @namespace
- @page
- @property
- @scope
- @starting-style
- @supports
- ID セレクタ
- accent-color
- acos()
- anchor-name
- animation-timeline
- appearance
- asin()
- aspect-ratio
- atan()
- atan2()
- attr()
- background
- background-color
- block-size
- brightness()
- calc()
- calc-size()
- circle()
- clamp()
- clip-rule
- color()
- color-mix()
- contain
- contain-intrinsic-block-size
- contain-intrinsic-height
- contain-intrinsic-inline-size
- contain-intrinsic-size
- contain-intrinsic-width
- container
- container-name
- container-type
- content-visibility
- cos()
- counter-set
- drop-shadow()
- ellipse()
- env()
- exp()
- field-sizing
- font-optical-sizing
- font-palette
- font-synthesis
- font-synthesis-small-caps
- font-synthesis-style
- font-synthesis-weight
- font-variant-position
- font-variation-settings
- grayscale()
- hue-rotate()
- hyphenate-character
- hyphens
- hypot()
- inline-size
- inset()
- interpolate-size
- invert()
- log()
- max()
- min()
- minmax()
- mod()
- object-fit
- object-position
- polygon()
- position-anchor
- position-area
- pow()
- prefers-color-scheme
- quotes
- rem()
- rotate
- round()
- ruby-align
- ruby-position
- saturate()
- scale
- scroll-behavior
- scroll-timeline
- scroll-timeline-axis
- scroll-timeline-name
- scrollbar-color
- scrollbar-gutter
- scrollbar-width
- sepia()
- sin()
- sqrt()
- tan()
- text-spacing-trim
- text-underline-offset
- text-wrap
- transition-behavior
- translate
- user-select
- white-space-collapse
- クラスセレクタ
- タイプセレクタ
- ユニバーサルセレクタ
- 入れ子セレクタ
- 子セレクタ
- 子孫セレクタ
- 属性セレクタ
- 間接セレクタ
- 隣接セレクタ
- Firefox
-
- ::after
- ::backdrop
- ::before
- ::cue
- ::file-selector-button
- ::first-letter
- ::first-line
- ::marker
- ::part()
- ::placeholder
- ::selection
- ::slotted()
- :active
- :any-link
- :checked
- :default
- :defined
- :disabled
- :empty
- :enabled
- :first
- :first-child
- :first-of-type
- :focus
- :focus-visible
- :focus-within
- :fullscreen
- :has()
- :host
- :hover
- :in-range
- :indeterminate
- :invalid
- :is()
- :lang()
- :last-child
- :last-of-type
- :link
- :not()
- :nth-child()
- :nth-last-child()
- :nth-last-of-type()
- :nth-of-type()
- :only-child
- :only-of-type
- :optional
- :out-of-range
- :placeholder-shown
- :read-only
- :read-write
- :required
- :root
- :scope
- :state()
- :target
- :valid
- :visited
- :where()
- @charset
- @color-profile
- @container
- @counter-style
- @font-feature-values
- @font-palette-values
- @keyframes
- @layer
- @namespace
- @page
- @property
- @scroll-timeline
- @starting-style
- @supports
- ID セレクタ
- accent-color
- acos()
- appearance
- asin()
- aspect-ratio
- atan()
- atan2()
- attr()
- background
- background-color
- block-size
- brightness()
- calc()
- circle()
- clamp()
- clip-rule
- color()
- color-mix()
- contain
- contain-intrinsic-block-size
- contain-intrinsic-height
- contain-intrinsic-inline-size
- contain-intrinsic-size
- contain-intrinsic-width
- container
- container-name
- container-type
- content-visibility
- cos()
- counter-set
- drop-shadow()
- ellipse()
- env()
- exp()
- font-optical-sizing
- font-palette
- font-synthesis
- font-synthesis-position
- font-synthesis-small-caps
- font-synthesis-style
- font-synthesis-weight
- font-variant-position
- font-variation-settings
- grayscale()
- hue-rotate()
- hyphenate-character
- hyphens
- hypot()
- inline-size
- inset()
- invert()
- log()
- max()
- min()
- minmax()
- mod()
- object-fit
- object-position
- polygon()
- pow()
- prefers-color-scheme
- quotes
- rem()
- rotate
- round()
- ruby-align
- ruby-position
- saturate()
- scale
- scroll-behavior
- scrollbar-color
- scrollbar-gutter
- scrollbar-width
- sepia()
- sin()
- sqrt()
- tan()
- text-underline-offset
- text-wrap
- text-wrap-mode
- text-wrap-style
- transition-behavior
- translate
- user-select
- white-space-collapse
- クラスセレクタ
- タイプセレクタ
- ユニバーサルセレクタ
- 入れ子セレクタ
- 子セレクタ
- 子孫セレクタ
- 属性セレクタ
- 間接セレクタ
- 隣接セレクタ
- Chrome
-
- ::after
- ::backdrop
- ::before
- ::cue
- ::file-selector-button
- ::first-letter
- ::first-line
- ::marker
- ::part()
- ::placeholder
- ::selection
- ::slotted()
- :active
- :any-link
- :checked
- :default
- :defined
- :disabled
- :empty
- :enabled
- :first
- :first-child
- :first-of-type
- :focus
- :focus-visible
- :focus-within
- :fullscreen
- :has()
- :host
- :hover
- :in-range
- :indeterminate
- :invalid
- :lang()
- :last-child
- :last-of-type
- :left
- :link
- :not()
- :nth-child()
- :nth-last-child()
- :nth-last-of-type()
- :nth-of-type()
- :only-child
- :only-of-type
- :optional
- :out-of-range
- :placeholder-shown
- :read-only
- :read-write
- :required
- :right
- :root
- :scope
- :state()
- :target
- :valid
- :visited
- @charset
- @color-profile
- @container
- @counter-style
- @font-feature-values
- @font-palette-values
- @keyframes
- @layer
- @namespace
- @page
- @property
- @scope
- @starting-style
- @supports
- ID セレクタ
- accent-color
- acos()
- anchor-name
- animation-timeline
- appearance
- asin()
- aspect-ratio
- atan()
- atan2()
- attr()
- background
- background-color
- block-size
- brightness()
- calc()
- calc-size()
- circle()
- clamp()
- clip-rule
- color()
- color-mix()
- contain
- contain-intrinsic-block-size
- contain-intrinsic-height
- contain-intrinsic-inline-size
- contain-intrinsic-size
- contain-intrinsic-width
- container
- container-name
- container-type
- content-visibility
- cos()
- counter-set
- drop-shadow()
- ellipse()
- env()
- exp()
- field-sizing
- font-optical-sizing
- font-palette
- font-synthesis
- font-synthesis-small-caps
- font-synthesis-style
- font-synthesis-weight
- font-variant-position
- font-variation-settings
- grayscale()
- hue-rotate()
- hyphenate-character
- hyphens
- hypot()
- inline-size
- inset()
- interpolate-size
- invert()
- log()
- max()
- min()
- minmax()
- mod()
- object-fit
- object-position
- polygon()
- position-anchor
- position-area
- pow()
- prefers-color-scheme
- quotes
- rem()
- rotate
- round()
- ruby-align
- ruby-position
- saturate()
- scale
- scroll-behavior
- scroll-timeline
- scroll-timeline-axis
- scroll-timeline-name
- scrollbar-color
- scrollbar-gutter
- scrollbar-width
- sepia()
- sin()
- sqrt()
- tan()
- text-spacing-trim
- text-underline-offset
- text-wrap
- transition-behavior
- translate
- user-select
- white-space-collapse
- クラスセレクタ
- タイプセレクタ
- ユニバーサルセレクタ
- 入れ子セレクタ
- 子セレクタ
- 子孫セレクタ
- 属性セレクタ
- 間接セレクタ
- 隣接セレクタ
- Safari
-
- ::after
- ::before
- ::cue
- ::file-selector-button
- ::first-letter
- ::first-line
- ::marker
- ::part()
- ::placeholder
- ::selection
- ::slotted()
- :active
- :any-link
- :checked
- :default
- :defined
- :disabled
- :empty
- :enabled
- :first
- :first-child
- :first-of-type
- :focus
- :focus-visible
- :focus-within
- :has()
- :host
- :hover
- :in-range
- :indeterminate
- :invalid
- :lang()
- :last-child
- :last-of-type
- :left
- :link
- :not()
- :nth-child()
- :nth-last-child()
- :nth-last-of-type()
- :nth-of-type()
- :only-child
- :only-of-type
- :optional
- :out-of-range
- :placeholder-shown
- :read-only
- :read-write
- :required
- :right
- :root
- :scope
- :state()
- :target
- :valid
- :visited
- @charset
- @color-profile
- @container
- @counter-style
- @font-feature-values
- @font-palette-values
- @keyframes
- @layer
- @namespace
- @page
- @property
- @scope
- @starting-style
- @supports
- ID セレクタ
- accent-color
- acos()
- appearance
- asin()
- aspect-ratio
- atan()
- atan2()
- attr()
- background
- background-color
- block-size
- brightness()
- calc()
- circle()
- clip-rule
- color()
- color-mix()
- contain
- contain-intrinsic-block-size
- contain-intrinsic-height
- contain-intrinsic-inline-size
- contain-intrinsic-size
- contain-intrinsic-width
- container
- container-name
- container-type
- content-visibility
- cos()
- counter-set
- drop-shadow()
- ellipse()
- env()
- exp()
- font-optical-sizing
- font-palette
- font-synthesis
- font-synthesis-small-caps
- font-synthesis-style
- font-synthesis-weight
- font-variant-position
- font-variation-settings
- grayscale()
- hue-rotate()
- hyphenate-character
- hyphens
- hypot()
- inline-size
- inset()
- invert()
- log()
- max()
- min()
- minmax()
- mod()
- object-fit
- object-position
- polygon()
- pow()
- prefers-color-scheme
- quotes
- rem()
- rotate
- round()
- ruby-position
- saturate()
- scale
- scroll-behavior
- sepia()
- sin()
- sqrt()
- tan()
- text-underline-offset
- text-wrap
- text-wrap-mode
- text-wrap-style
- transition-behavior
- translate
- user-select
- white-space-collapse
- クラスセレクタ
- タイプセレクタ
- ユニバーサルセレクタ
- 入れ子セレクタ
- 子セレクタ
- 子孫セレクタ
- 属性セレクタ
- 間接セレクタ
- 隣接セレクタ
- iOS Safari
-
- ::after
- ::before
- ::cue
- ::file-selector-button
- ::first-letter
- ::first-line
- ::marker
- ::part()
- ::placeholder
- ::selection
- ::slotted()
- :active
- :any-link
- :checked
- :default
- :defined
- :disabled
- :empty
- :enabled
- :first
- :first-child
- :first-of-type
- :focus
- :focus-visible
- :focus-within
- :fullscreen
- :has()
- :host
- :hover
- :in-range
- :indeterminate
- :invalid
- :lang()
- :last-child
- :last-of-type
- :left
- :link
- :not()
- :nth-child()
- :nth-last-child()
- :nth-last-of-type()
- :nth-of-type()
- :only-child
- :only-of-type
- :optional
- :out-of-range
- :placeholder-shown
- :read-only
- :read-write
- :required
- :right
- :root
- :scope
- :state()
- :target
- :valid
- :visited
- @charset
- @color-profile
- @container
- @counter-style
- @font-feature-values
- @font-palette-values
- @keyframes
- @layer
- @namespace
- @page
- @property
- @scope
- @starting-style
- @supports
- ID セレクタ
- accent-color
- acos()
- appearance
- asin()
- aspect-ratio
- atan()
- atan2()
- attr()
- background
- background-color
- block-size
- brightness()
- calc()
- circle()
- clip-rule
- color()
- color-mix()
- contain
- contain-intrinsic-block-size
- contain-intrinsic-height
- contain-intrinsic-inline-size
- contain-intrinsic-size
- contain-intrinsic-width
- container
- container-name
- container-type
- content-visibility
- cos()
- counter-set
- drop-shadow()
- ellipse()
- env()
- exp()
- font-optical-sizing
- font-palette
- font-synthesis
- font-synthesis-small-caps
- font-synthesis-style
- font-synthesis-weight
- font-variant-position
- font-variation-settings
- grayscale()
- hue-rotate()
- hyphenate-character
- hyphens
- hypot()
- inline-size
- inset()
- invert()
- log()
- max()
- min()
- minmax()
- mod()
- object-fit
- object-position
- polygon()
- pow()
- prefers-color-scheme
- quotes
- rem()
- rotate
- round()
- ruby-position
- saturate()
- scale
- scroll-behavior
- sepia()
- sin()
- sqrt()
- tan()
- text-underline-offset
- text-wrap
- text-wrap-mode
- text-wrap-style
- transition-behavior
- translate
- user-select
- white-space-collapse
- クラスセレクタ
- タイプセレクタ
- ユニバーサルセレクタ
- 入れ子セレクタ
- 子セレクタ
- 子孫セレクタ
- 属性セレクタ
- 間接セレクタ
- 隣接セレクタ
- Android Chrome
-
- ::after
- ::backdrop
- ::before
- ::cue
- ::file-selector-button
- ::first-letter
- ::first-line
- ::marker
- ::part()
- ::placeholder
- ::selection
- ::slotted()
- :active
- :any-link
- :checked
- :default
- :defined
- :disabled
- :empty
- :enabled
- :first
- :first-child
- :first-of-type
- :focus
- :focus-visible
- :focus-within
- :fullscreen
- :has()
- :host
- :hover
- :in-range
- :indeterminate
- :invalid
- :lang()
- :last-child
- :last-of-type
- :left
- :link
- :not()
- :nth-child()
- :nth-last-child()
- :nth-last-of-type()
- :nth-of-type()
- :only-child
- :only-of-type
- :optional
- :out-of-range
- :placeholder-shown
- :read-only
- :read-write
- :required
- :right
- :root
- :scope
- :state()
- :target
- :visited
- @charset
- @color-profile
- @container
- @counter-style
- @font-feature-values
- @font-palette-values
- @keyframes
- @layer
- @namespace
- @page
- @property
- @scope
- @starting-style
- @supports
- ID セレクタ
- accent-color
- acos()
- anchor-name
- animation-timeline
- appearance
- asin()
- aspect-ratio
- atan()
- atan2()
- attr()
- background
- background-color
- block-size
- brightness()
- calc()
- calc-size()
- circle()
- clamp()
- clip-rule
- color()
- color-mix()
- contain
- contain-intrinsic-block-size
- contain-intrinsic-height
- contain-intrinsic-inline-size
- contain-intrinsic-size
- contain-intrinsic-width
- container
- container-name
- container-type
- content-visibility
- cos()
- counter-set
- drop-shadow()
- ellipse()
- env()
- exp()
- field-sizing
- font-optical-sizing
- font-palette
- font-synthesis
- font-synthesis-small-caps
- font-synthesis-style
- font-synthesis-weight
- font-variant-position
- font-variation-settings
- grayscale()
- hue-rotate()
- hyphenate-character
- hyphens
- hypot()
- inline-size
- inset()
- interpolate-size
- invert()
- log()
- max()
- min()
- minmax()
- mod()
- object-fit
- object-position
- polygon()
- position-anchor
- position-area
- pow()
- prefers-color-scheme
- quotes
- rem()
- rotate
- round()
- ruby-align
- ruby-position
- saturate()
- scale
- scroll-behavior
- scroll-timeline
- scroll-timeline-axis
- scroll-timeline-name
- scrollbar-color
- scrollbar-gutter
- scrollbar-width
- sepia()
- sin()
- sqrt()
- tan()
- text-spacing-trim
- text-underline-offset
- text-wrap
- transition-behavior
- translate
- user-select
- white-space-collapse
- クラスセレクタ
- タイプセレクタ
- ユニバーサルセレクタ
- 入れ子セレクタ
- 子セレクタ
- 子孫セレクタ
- 属性セレクタ
- 間接セレクタ
- 隣接セレクタ