トップページ  > CSS  > hanging-punctuation

★CSSリファレンス

hanging-punctuation …… 括弧・引用符・句読点の禁則処理を指定する
広告

hanging-punctuationプロパティは、括弧・引用符・句読点の禁則処理を指定する際に使用します。

hanging-punctuationプロパティの値に none 以外を指定すると、括弧・引用符・句読点が行頭や行末にきた場合に行ボックスの外側に配置して禁則処理を行います。

hanging-punctuationプロパティの指定やテキスト内容によっては、ブロックコンテナに十分なpadding(内側余白)がない場合にオーバーフローが起こる可能性があります。

■値

none
禁則処理が行われない(初期値)
first
始め括弧・引用符が禁則処理される
last
終わり括弧・引用符が禁則処理される
force-end
行末のピリオド・コンマなどが禁則処理される
allow-end
均等割付が実行される前にフィットしない場合には、行末のピリオド・コンマなどが禁則処理される

■初期値・適用対象・値の継承

初期値
none
適用対象
インライン要素
値の継承
する

■使用例

スタイルシート部分は外部ファイル(sample.css)に記述。

p.sample {
	width:200px;
	background-color:#99cc00;
}

HTMLソース

<h5>hanging-punctuation: none; を指定</h5>
<p class="sample" style="hanging-punctuation: none;">
かえる"ぴょこぴょこ"み"ぴょこぴょこ"<br>
あわせて"ぴょこぴょこ"む"ぴょこぴょこ"
</p>
<p class="sample" style="hanging-punctuation: none;">
Three frogs leaping "pyokopyoko" together. They're three "pyokopyoko".<br>
New three frogs leaping "pyokopyoko" together. Now they're six "pyokopyoko".
</p>

<h5>hanging-punctuation: first last; を指定</h5>
<p class="sample" style="hanging-punctuation: first last;">
かえる"ぴょこぴょこ"み"ぴょこぴょこ"<br>
あわせて"ぴょこぴょこ"む"ぴょこぴょこ"
</p>
<p class="sample" style="hanging-punctuation: first last;">
Three frogs leaping "pyokopyoko" together. They're three "pyokopyoko".<br>
New three frogs leaping "pyokopyoko" together. Now they're six "pyokopyoko".
</p>
↓↓↓

ブラウザ上の表示

hanging-punctuation: none; を指定

かえる"ぴょこぴょこ"み"ぴょこぴょこ"
あわせて"ぴょこぴょこ"む"ぴょこぴょこ"

Three frogs leaping "pyokopyoko" together. They're three "pyokopyoko".
New three frogs leaping "pyokopyoko" together. Now they're six "pyokopyoko".

hanging-punctuation: first last; を指定

かえる"ぴょこぴょこ"み"ぴょこぴょこ"
あわせて"ぴょこぴょこ"む"ぴょこぴょこ"

Three frogs leaping "pyokopyoko" together. They're three "pyokopyoko".
New three frogs leaping "pyokopyoko" together. Now they're six "pyokopyoko".

広告
Sponsors
広告
MuuMuu Domain!
ドメイン取るならお名前.com
さくらのレンタルサーバ
ロリポップ!レンタルサーバー
Google Apps Scriptコース
Node.jsコース
はじめてのプログラミングコース
▲ページ先頭へ
HTMLクイックリファレンスについて
© HTMQ