在此页

• 句法
• 形式定义
• 形式句法
• 范例
• 规范
• 浏览器兼容性
• 相关话题

hanging-punctuation CSS property specifies whether a punctuation mark should hang at the start or end of a line of text. Hanging punctuation may be placed outside the line box.

/* Keyword values */
hanging-punctuation: none;
hanging-punctuation: first;
hanging-punctuation: last;
hanging-punctuation: force-end;
hanging-punctuation: allow-end;
/* Two keywords */
hanging-punctuation: first force-end;
hanging-punctuation: first allow-end;
hanging-punctuation: first last;
hanging-punctuation: last force-end;
hanging-punctuation: last allow-end;
/* Three keywords */
hanging-punctuation: first force-end last;
hanging-punctuation: first allow-end last;
/* Global values */
hanging-punctuation: inherit;
hanging-punctuation: initial;
hanging-punctuation: unset;
					

句法

hanging-punctuation property may be specified with one, two, or three values.

• One-value syntax uses any one of the keyword values in the list below.
• Two-value syntax uses one of the following:
  • first together with any one of last , allow-end ，或 force-end
  • last together with any one of first , allow-end ，或 force-end
• Three-value syntax uses one of the following:
  • first , allow-end ，和 last
  • first , force-end ，和 last

值

none

No character hangs.

first

An opening bracket or quote at the start of the first formatted line of an element hangs.

last

A closing bracket or quote at the end of the last formatted line of an element hangs.

force-end

A stop or comma at the end of a line hangs.

allow-end

A stop or comma at the end of a line hangs if it does not otherwise fit prior to justification.

形式定义

初始值	none
适用于	所有元素
继承	yes
计算值	如指定
动画类型	discrete

形式句法

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

范例

Setting opening and closing quotes to hang

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 The definition of 'hanging-punctuation' in that specification.	工作草案	初始定义

浏览器兼容性

The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. 更新 GitHub 上的兼容性数据

	Desktop						Mobile
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Chrome for Android	Firefox for Android	Opera for Android	Safari on iOS	Samsung Internet
hanging-punctuation	Chrome 不支持 No	Edge 不支持 No	Firefox 不支持 No	IE 不支持 No	Opera 不支持 No	Safari 部分支持 10 注意事项 部分支持 10 注意事项 注意事项 force-end keyword is recognized but has no effect.	WebView Android 不支持 No	Chrome Android 不支持 No	Firefox Android 不支持 No	Opera Android 不支持 No	Safari iOS 部分支持 10 注意事项 部分支持 10 注意事项 注意事项 force-end keyword is recognized but has no effect.	Samsung Internet Android 不支持 No

图例

部分支持

部分支持

不支持

不支持

见实现注意事项。

见实现注意事项。

元数据

• 最后修改： 2020 年 7 月 17 日

相关话题

1. CSS
2. CSS 参考
3. CSS Text
4. 特性

   1. hanging-punctuation
   2. hyphens
   3. letter-spacing
   4. line-break
   5. overflow-wrap
   6. paint-order
   7. tab-size
   8. text-align
   9. text-align-last
   10. text-indent
   11. text-justify
   12. text-size-adjust
   13. text-transform
   14. white-space
   15. word-break
   16. word-spacing