hanging-punctuation

Limited availability

This feature is not Baseline because it does not work in some of the most widely-used browsers.

hanging-punctuation CSS 属性指定了标点符号应该放在文本句子的开头还是结尾。悬挂标点符号可能被放在线框外。

css
/* 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;
初始值none
适用元素所有元素
是否是继承属性是
计算值as specified
动画类型离散值

语法

这个属性可被指定多个值，可以是一个值，也可以是两个值，或者是三个值。

  • 一个值 语法：在下面列表中的任意一个值。

  • 两个值 语法：

    • 或者与以下任何一个一起使用，并以它们结尾：last，allow-end 或 force-end
    • 或者与以下任何一个一起使用，并以它们开头：first，allow-end 或 force-end。

  • 三个值 语法：

    • 或者first, allow-end, 和last
    • 或者 first, force-end, 和 last.

取值

none

无悬挂字符。

first

显示元素的第一个格式化行开头的括号或引号。

last

显示元素的最后一个格式化行结尾的括号或引号。

force-end

显示行结尾处的句号或逗号。

allow-end

如果预先没有其他适合的来适应的，则在行尾显示句号或逗号。

正式语法

hanging-punctuation = 
  none                                            |
  [ first || [ force-end | allow-end ] || last ]

示例

HTML

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

css
p {
  hanging-punctuation: first;
  margin: 0.5rem;
}

Result

Specifications