これは実験的な機能です。本番で使用する前にブラウザー実装状況をチェックしてください。

CSShanging-punctuation プロパティは、区切り記号をテキストの行頭や行末にぶら下げるべきかどうかを指定します。ぶら下げられる区切り記号は行ボックスの外側に配置されれることがあります。

/* キーワード値 */
hanging-punctuation: none;
hanging-punctuation: first;
hanging-punctuation: last;
hanging-punctuation: force-end;
hanging-punctuation: allow-end;

/* 2 つのキーワード */
hanging-punctuation: first force-end;
hanging-punctuation: first allow-end;
hanging-punctuation: first last;
hanging-punctuation: last force-end;
hanging-punctuation: last allow-end;

/* 3 つのキーワード */
hanging-punctuation: first force-end last;
hanging-punctuation: first allow-end last;

/* グローバル値 */
hanging-punctuation: inherit;
hanging-punctuation: initial;
hanging-punctuation: unset;

初期値none
適用対象すべての要素
継承あり
メディア視覚
計算値指定値
アニメーションの種類個別
正規順序形式文法で定義される一意のあいまいでない順序

構文

hanging-punctuation プロパティは 1 つ、2 つ、 3 つの値で指定することができます。

  • 値1つの構文は、下記の値リストのキーワード値のいずれか 1 つを使用します。
  • 値2つの構文は、次のうち 1 つを使用します。
    • first と併せて、last, allow-end, force-end のいずれか
    • last と併せて、first, allow-end, force-end のいずれか
  • 値3つの構文は、次のうち 1 つを使用します。
    • first, allow-end, last
    • first, force-end, last

none
文字のぶら下げを行いません。
first
要素の最初の書式設定された行頭にある、開き括弧または引用符をぶら下げます。
last
要素の最後の書式設定された行末にある、閉じ括弧または引用符をぶら下げます。
force-end
行末の句読点をぶら下げます。
allow-end
句読点をぶら下げないと行末が揃わない場合に、句読点をぶらぶら下げます。

形式文法

none | [ first || [ force-end | allow-end ] || last ]

HTML

<p>“Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur dignissim nunc mauris, et sollicitudin est scelerisque sed. Praesent laoreet tortor massa, sit amet vulputate nulla pharetra ut.”</p>

CSS

p {
  hanging-punctuation: first last;
  margin: .5rem;
}

結果

仕様書

仕様書 状態 備考
CSS Text Module Level 3
hanging-punctuation の定義
草案 初回定義

ブラウザーの対応

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeEdge MobileAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
基本対応
実験的
Chrome 未対応 なしEdge 未対応 なしFirefox 未対応 なしIE 未対応 なしOpera 未対応 なしSafari 完全対応 10WebView Android 未対応 なしChrome Android 未対応 なしEdge Mobile 未対応 なしFirefox Android 未対応 なしOpera Android 未対応 なしSafari iOS 完全対応 10Samsung Internet Android 未対応 なし

凡例

完全対応  
完全対応
未対応  
未対応
実験的。動作が変更される可能性があります。
実験的。動作が変更される可能性があります。

ドキュメントのタグと貢献者

このページの貢献者: mfuji09, dskmori, rigani
最終更新者: mfuji09,