CSS辞典 hyphensプロパティの解説
ハイフネーションの方法を指定する「hyphensプロパティ」の使用方法を記載
対応バージョン:CSS3/2.1
対応ブラウザ
初期値 | 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">Sincetheshapeissimilartothat 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">Sincetheshapeissimilartothat 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">Sincetheshapeissimilartothat 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
Sincetheshapeissimilartothat of sweetfish, it was named “Ayu fish woman”. It inhabits from Hokkaido to southern Kyushu. The season is from summer to autumn.
manual
Sincetheshapeissimilartothat of sweetfish, it was named “Ayu fish woman”. It inhabits from Hokkaido to southern Kyushu. The season is from summer to autumn.
auto
Sincetheshapeissimilartothat of sweetfish, it was named “Ayu fish woman”. It inhabits from Hokkaido to southern Kyushu. The season is from summer to autumn.
chromeブラウザ実行結果
Firefox ブラウザ実行結果
edgeブラウザ実行結果
operaブラウザ実行結果