CSS辞典 hyphensプロパティの解説

ハイフネーションの方法を指定する「hyphensプロパティ」の使用方法を記載

対応バージョン:CSS3/2.1

対応ブラウザ

ruby要素,rb要素,rt要素、rp要素、rtc要素 対応ブラウザ:chrome
ruby要素,rb要素,rt要素、rp要素、rtc要素 対応ブラウザ:firefox
ruby要素,rb要素,rt要素、rp要素、rtc要素 対応ブラウザ:safari
ruby要素,rb要素,rt要素、rp要素、rtc要素 対応ブラウザ:ms edge
ruby要素,rb要素,rt要素、rp要素、rtc要素 対応ブラウザ:ms ie
ruby要素,rb要素,rt要素、rp要素、rtc要素 対応ブラウザ:opera
初期値auto
適用される要素インラインボックス
モジュールCSS Fonts Module Level3
継承あり

概要・使用方法

{hyphens: 改行方法;}

「hyphensプロパティ」は、1つの単語を複数行にわたって折り返す際、分割位置にハイフン(-)を挿入してひと続きの単語であることを表す。「ハイフネーション」を行う方法をしています。なお、ハイフネーションは言語に依存します。

改行方法

manual(初期値)HTMLソース内に­(不可視のソフトハイフン)が記述され、
単語間での分割可能位置が指示されている場合はそれを使用して改行し、ハイフンが可視化されます。
auto改行する位置が自動的に判断されてハイフンが挿入されます。
none­によって分割可能位置が指示されている場合でも、単語を分割しません。

「ソフト」ハイフン(“soft” hyphen)は表示されることはありません。ブラウザーが必要に応じて単語を分割できる位置を示します。

サンプルコード

<!DOCTYPE html>
<html lang="ja">
  <head>
    <title>hyphensプロパティ CSSフォントサンプルページ</title>
    <meta charset="uft-8">
    <style>
          .sample0{
                    hyphens: none;
                    -moz-hyphens: none;
                    -webkit-hyphens: none;
                    -ms-hyphens: none;
                    width: 200px;
                    height: 200px;
                    border: 1px solid #ffaa00;
                  }
          .sample1{
                    hyphens: manual;
                    -moz-hyphens: manual;
                    -webkit-hyphens: manual;
                    -ms-hyphens: manual;
                    width: 200px;
                    height: 200px;
                    border: 1px solid #ffaa00;
                  }
          .sample2{
                   hyphens: auto;
                    -moz-hyphens: auto;
                    -webkit-hyphens: auto;
                    -ms-hyphens: auto;
                    width: 200px;
                    height: 200px;
                    border: 1px solid #ffaa00;
                  }
    </style>
  </head>
  <body>
      <h1>none</h1>
      <p class="sample0">Sincetheshapeissim­ilartothat of sweetfish, it was named "Ayu fish woman". It inhabits from Hokkaido to southern Kyushu. The season is from summer to autumn.</p>
      <h1>manual</h1>
      <p class="sample1">Sincetheshapeissim­ilartothat of sweetfish, it was named "Ayu fish woman". It inhabits from Hokkaido to southern Kyushu. The season is from summer to autumn.</p>
      <h1>auto</h1>
      <p class="sample2">Sincetheshapeissim­ilartothat of sweetfish, it was named "Ayu fish woman". It inhabits from Hokkaido to southern Kyushu. The season is from summer to autumn.</p>
  </body>
</html>

none

Sincetheshapeissim­ilartothat of sweetfish, it was named “Ayu fish woman”. It inhabits from Hokkaido to southern Kyushu. The season is from summer to autumn.

manual

Sincetheshapeissim­ilartothat of sweetfish, it was named “Ayu fish woman”. It inhabits from Hokkaido to southern Kyushu. The season is from summer to autumn.

auto

Sincetheshapeissim­ilartothat of sweetfish, it was named “Ayu fish woman”. It inhabits from Hokkaido to southern Kyushu. The season is from summer to autumn.

chromeブラウザ実行結果


Firefox ブラウザ実行結果

Firefox


edgeブラウザ実行結果

edge


operaブラウザ実行結果

opera