CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

CSSのhyphens（ハイフン）プロパティの使い方と設定値を徹底解説

CSSのhyphensプロパティは、テキストが複数行に折り返される際に、単語をどのようにハイフネーション（ハイフンで区切る処理）するかを指定するためのプロパティです。長い単語がコンテナからあふれるのを防ぎ、読みやすいテキストレイアウトを実現したい場合に役立ちます。

hyphensプロパティの構文

hyphensプロパティには、以下の値を指定できます。

hyphens: none | manual | auto | initial | inherit;

各値の意味

  • none：ハイフネーションを行いません。改行時にも単語は分割されません。
  • manual：­（ソフトハイフン）など、明示的に挿入されたハイフン位置でのみ改行します。これが初期値です。
  • auto：ブラウザが言語ルールに基づいて自動的にハイフンを挿入し、適切な位置で改行します。
  • initial：このプロパティの初期値（manual）に戻します。
  • inherit：親要素のhyphensプロパティの値を継承します。

なお、autoを正しく機能させるには、HTML要素にlang属性で言語を指定しておく必要があります。

サンプルコード1：hyphens: manual の例

まずはmanualを指定した例を見てみましょう。

<!DOCTYPE html>
<html>
<head>
<style>
div {
    width: 50px;
    border: 2px dashed red;
}
.demo {
    -webkit-hyphens: manual;
    -ms-hyphens: manual;
    hyphens: manual;
}
</style>
</head>
<body>
<h1>デモ見出し</h1>
<h2>hyphens: manual の指定例</h2>
<div class="demo">This is a demo text.</div>
</body>
</html>

表示結果

CSSのhyphens（ハイフン）プロパティの使い方と設定値を徹底解説

manualの場合、ソフトハイフン（&shy;）などの明示的な指定がない限り、単語の途中で改行されません。

サンプルコード2：hyphens: auto の例

続いて、autoを指定した別の例です。

<!DOCTYPE html>
<html>
<head>
<style>
div {
    width: 50px;
    border: 2px dashed red;
    color: blue;
}
.demo {
    -webkit-hyphens: auto;
    -ms-hyphens: auto;
    hyphens: auto;
}
</style>
</head>
<body>
<h1>デモ見出し</h1>
<h2>hyphens: auto の指定例</h2>
<div class="demo">This isssssss a demo text.</div>
</body>
</html>

表示結果

CSSのhyphens（ハイフン）プロパティの使い方と設定値を徹底解説

autoを指定すると、ブラウザが自動的にハイフンを挿入し、狭いコンテナ内でも単語が適切に折り返されます。

ブラウザ対応について

hyphensプロパティは主要なモダンブラウザでサポートされていますが、古いバージョンのSafariやInternet Explorerではベンダープレフィックス（-webkit-や-ms-）が必要な場合があります。上記のサンプルコードのように、プレフィックス付きの宣言も併せて記述しておくと安心です。

  1. CSSのrightプロパティとは？構文と使い方を実例付きで解説

    CSSのrightプロパティは、positionが指定された要素の水平方向の位置を設定するために使用します。基準となる包含ブロックの右端から、要素の右端までの距離を指定できます。 なお、rightプロパティはpositionプロパティがstatic以外（relative・absolute・fixed・sticky）のときにのみ有効になる点に注意してください。 構文 right: auto|length|initial|inherit; 指定できる値 auto … 初期値。位置の計算をブラウザに任せます。 length … pxやemなどの単位で距離を指定します。負の値も指定可能です。 ini

  2. CSSのcolorプロパティで文字色を設定する方法

    CSSを使用すると、要素のテキスト、ボーダー（枠線）、背景それぞれに対して自由に色を定義できます。その中でもcolorプロパティは、要素内のテキストの色を指定するために使われる基本的なプロパティです。基本構文CSSのcolorプロパティは、次のような形式で記述します。セレクタ {     color: /* 値 */; }値には、キーワード名（例：red、blue）、16進数カラーコード（例：#ff0000）、RGB値（例：rgb(255,0,0)）など、さまざまな形式が利用可能です。サンプルコード①：divとp要素への色指定以下の例では、div要素とp