Свойство CSS `hanging-punctuation`

Свойство hanging-punctuation CSS задаёт, должна ли пунктуация выступать за начало или конец строки текста. Выступающая пунктуация может располагаться за пределами линейного блока.

Синтаксис

/* Keyword values */
hanging-punctuation: none;
hanging-punctuation: first;
hanging-punctuation: last;
hanging-punctuation: allow-end;

/* Two keywords */
hanging-punctuation: first allow-end;
hanging-punctuation: first last;
hanging-punctuation: last allow-end;

/* Three keywords */
hanging-punctuation: first allow-end last;

/* Global values */
hanging-punctuation: inherit;
hanging-punctuation: initial;
hanging-punctuation: revert;
hanging-punctuation: revert-layer;
hanging-punctuation: unset;

Свойство hanging-punctuation можно задать одним, двумя или тремя значениями, разделёнными пробелами.

Значения

none

Ни один символ не выступает за пределы строки.

first

Открывающая скобка или кавычка в начале первой форматированной строки элемента выступает за пределы строки. Это относится к:

• всем символам категорий Unicode Ps, Pf, Pi
• кавычкам U+0027 APOSTROPHE (') и U+0022 QUOTATION MARK (").

last

Закрывающая скобка или кавычка в конце последней форматированной строки элемента выступает за пределы строки. Это относится к:

• всем символам категорий Unicode Pe, Pf, Pi
• кавычкам U+0027 APOSTROPHE (') и U+0022 QUOTATION MARK (").

allow-end

Точка или запятая в конце строки выступает за её пределы, если иначе она не помещается до выравнивания.

К точкам и запятым, которым разрешено выступать за пределы строки, относятся:

• U+002C, COMMA
• U+002E, FULL STOP
• U+060C, ARABIC COMMA
• U+06D4, ARABIC FULL STOP
• U+3001, IDEOGRAPHIC COMMA
• U+3002, IDEOGRAPHIC FULL STOP
• U+FF0C, FULLWIDTH COMMA
• U+FF0E, FULLWIDTH FULL STOP
• U+FE50, SMALL COMMA
• U+FE51, SMALL IDEOGRAPHIC COMMA
• U+FE52, SMALL FULL STOP
• U+FF61, HALFWIDTH IDEOGRAPHIC FULL STOP
• U+FF64, HALFWIDTH IDEOGRAPHIC COMMA

Пользовательские агенты могут включать дополнительные символы.

Формальное определение

Формальный синтаксис

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

Примеры

Выступающие открывающие и закрывающие кавычки

HTML

<p>
  «For a moment, nothing happened. Then, after a second or so, nothing continued
  to happen.»
</p>

<p class="hanging">
  «For a moment, nothing happened. Then, after a second or so, nothing continued
  to happen.»
</p>

<p class="hanging right">
  «For a moment, nothing happened. Then, after a second or so, nothing continued
  to happen.»
</p>

CSS

p {
  width: 15em;
  border: 1px solid #cccccc;
  font-size: 2rem;
  font-style: italic;
  margin: 1em;
}

p.hanging {
  hanging-punctuation: first last;
}

p.right {
  text-align: right;
}

Результат

Спецификации

Совместимость с браузерами

См. также

• text-indent
• CSS Tricks: выступающая пунктуация