hanging-punctuationプロパティは、括弧・引用符・句読点の禁則処理を指定する際に使用します。
hanging-punctuationプロパティの値に none 以外を指定すると、括弧・引用符・句読点が行頭や行末にきた場合に行ボックスの外側に配置して禁則処理を行います。
hanging-punctuationプロパティの指定やテキスト内容によっては、ブロックコンテナに十分なpadding（内側余白）がない場合にオーバーフローが起こる可能性があります。
p.sample {
width:200px;
background-color:#99cc00;
}
<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>
かえる”ぴょこぴょこ”み”ぴょこぴょこ”
あわせて”ぴょこぴょこ”む”ぴょこぴょこ”
Three frogs leaping “pyokopyoko” together. They’re three “pyokopyoko”.
New three frogs leaping “pyokopyoko” together. Now they’re six “pyokopyoko”.
かえる”ぴょこぴょこ”み”ぴょこぴょこ”
あわせて”ぴょこぴょこ”む”ぴょこぴょこ”
Three frogs leaping “pyokopyoko” together. They’re three “pyokopyoko”.
New three frogs leaping “pyokopyoko” together. Now they’re six “pyokopyoko”.