CSS-свойство hanging-punctuation
Свойство CSS hanging-punctuation: синтаксис, значения (none, first, last, allow-end, force-end), примеры и поддержка браузерами.
CSS-свойство hanging-punctuation управляет тем, должен ли знак препинания — например, открывающая или закрывающая кавычка, запятая или точка — выступать за начальный или конечный край строчного блока, а не располагаться внутри области содержимого.
Этот приём пришёл из печатной типографики: когда абзац начинается с открывающей кавычки, вынесение этого знака за левый край текста обеспечивает оптическое выравнивание самих букв. То же самое относится к конечным знакам препинания — выступающая точка или запятая придаёт правому краю выровненного абзаца чистый и аккуратный вид.
Поддержка браузерами ограничена. По состоянию на 2026 год
hanging-punctuationподдерживается только в Safari (движок WebKit). Chrome, Edge и Firefox игнорируют это свойство. Используйте его как прогрессивное улучшение — если браузер не поддерживает его, текст просто отображается без выступа, что является вполне корректным запасным вариантом.
| Начальное значение | none |
|---|---|
| Применяется к | Всем элементам |
| Наследуется | Да |
| Анимируемое | Нет |
| Версия | CSS3 |
| DOM-синтаксис | object.style.hangingPunctuation = "first last"; |
Синтаксис
hanging-punctuation: none;
hanging-punctuation: first;
hanging-punctuation: last;
hanging-punctuation: allow-end;
hanging-punctuation: force-end;
/* Combine edge keywords */
hanging-punctuation: first last;
hanging-punctuation: first allow-end;
hanging-punctuation: first force-end;
hanging-punctuation: last allow-end;
hanging-punctuation: last force-end;
/* Global values */
hanging-punctuation: initial;
hanging-punctuation: inherit;
hanging-punctuation: unset;В одном объявлении может присутствовать до трёх ключевых слов: не более одного для начального края (first), не более одного для конечного края (last) и не более одного для середины строки (allow-end или force-end).
Какие символы выступают?
Спецификация CSS определяет «выступающие» символы следующим образом:
- Открывающие знаки препинания, выступающие в начале:
",',«,‹и их восточноазиатские эквиваленты. - Закрывающие знаки препинания, выступающие в конце:
",',»,›,.,,,!,?,。,、и подобные им.
Кандидатами на выступ являются только символы на самом внешнем крае строки — внутренние знаки препинания внутри строки не затрагиваются.
Значения
| Значение | Описание |
|---|---|
none | Ни один знак препинания не выступает. Это значение по умолчанию. |
first | Открывающий знак препинания в начале первой строки выступает за начальный край блока. |
last | Закрывающий знак препинания в конце последней строки выступает за конечный край блока. |
allow-end | Закрывающий знак препинания в конце любой строки выступает только если он иначе не вписывается до применения выравнивания. |
force-end | Закрывающий знак препинания в конце каждой строки всегда выступает, независимо от того, вписался бы он или нет. |
initial | Сбрасывает значение до начального (none). |
inherit | Наследует вычисленное значение от родительского элемента. |
unset | Сбрасывает до унаследованного значения (поскольку свойство наследуется), что фактически равнозначно inherit. |
allow-end и force-end
Различие между этими двумя значениями конечного выступа тонкое, но важное:
allow-end— выносит конечный знак препинания только тогда, когда он не вписывается в строку до применения выравнивания. Иными словами, браузер использует выступ лишь как крайнюю меру, чтобы избежать неудобных промежутков при выравнивании.force-end— всегда выносит конечный знак препинания в поле на каждой строке, независимо от наличия свободного места. Это может создать последовательный оптический отступ, но на коротких строках может выглядеть странно.
Используйте allow-end для основного текста, где нужна тонкость; используйте force-end, когда требуется строгое выравнивание оптических полей, аналогичное традиционным типографским системам.
hanging-punctuation: first
Значение first позволяет открывающему знаку препинания на первой строке выступать за начальный (левый, в тексте слева направо) край содержащего блока. В результате основной текст остаётся оптически выровненным, а открывающая кавычка уходит в поле.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
blockquote {
font-style: normal;
font-size: 25px;
width: 20em;
border-left: 1px solid #000;
padding: 3rem 0;
hanging-punctuation: first;
}
</style>
</head>
<body>
<h2>Hanging-punctuation property example</h2>
<blockquote>"Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s".</blockquote>
</body>
</html>Результат
![CSS-свойство hanging-punctuation](/uploads/media/default/0001/04/da969d68b09b2be6083c7027f773927d30f8cabe.png "CSS hanging-punctuation property result" =420x)
Символ открывающей кавычки " перемещается левее линии границы, поэтому буква L в слове Lorem визуально выравнивается со строками ниже.
hanging-punctuation: last
Значение last выносит закрывающий знак препинания — например, точку, запятую или закрывающую кавычку на последней строке — за конечный (правый, в тексте слева направо) край блока. Это наиболее полезно для текста с выравниванием по правому краю или по ширине, где знак препинания в поле предотвращает оптически неровный край.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p {
font-size: 22px;
width: 16em;
text-align: justify;
border-right: 1px solid #000;
padding: 1rem 0;
hanging-punctuation: last;
}
</style>
</head>
<body>
<h2>hanging-punctuation: last</h2>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting
industry, used here to show a trailing punctuation mark.
</p>
</body>
</html>Завершающая точка в конце абзаца сдвигается правее границы, сохраняя оптически чистый правый край выровненного блока.
Комбинирование значений
Вы можете объединить first, last и одно из ключевых слов конечного выступа в одном объявлении. Порядок ключевых слов не важен:
/* Hang opening quote at start AND closing punctuation at end */
blockquote {
hanging-punctuation: first last;
}
/* Hang opening quote at start, and allow end-punctuation to hang when needed */
p {
hanging-punctuation: first allow-end;
}Комбинация first last является распространённым типографским паттерном для блочных цитат: открывающая " выступает в верхнем левом углу, а закрывающая " или . — в нижнем правом.
Практические советы по применению
Сочетайте с text-indent для оптического выравнивания.
Если вы задаёте отрицательный text-indent для контейнера, hanging-punctuation: first и text-indent могут конфликтовать. Предпочитайте hanging-punctuation ручному отрицательному отступу — это семантически корректно и обеспечивает корректную деградацию.
Сочетайте с выравниванием по ширине.
hanging-punctuation: last и force-end лучше всего работают с text-align: justify (см. text-align). При выравнивании по левому краю эффект обычно незаметен, если только последняя строка не заканчивается точно у края блока.
Применяйте к <blockquote> и врезкам с цитатами.
Эти элементы почти всегда начинаются с открывающей кавычки, поэтому hanging-punctuation: first даёт здесь наибольший эффект и является наименее рискованным местом для применения.
Прогрессивное улучшение — @supports не нужен.
Поскольку свойство наследуется и деградирует до none, его можно безопасно применять без проверки поддержки возможностей:
blockquote {
hanging-punctuation: first last; /* ignored by Chrome/Edge/Firefox; used by Safari */
}Связанные свойства
Следующие свойства часто используются вместе с hanging-punctuation при тонкой настройке типографики:
- text-align — задаёт горизонтальное выравнивание;
justifyделает выступающие конечные знаки препинания наиболее заметными. - text-justify — управляет тем, как выровненный текст распределяет пространство между словами и символами.
- text-indent — задаёт отступ первой строки блока; можно комбинировать с
hanging-punctuation: first. - hyphens — управляет автоматической расстановкой переносов; сочетание с
hanging-punctuationдаёт полный типографский контроль над концами строк. - white-space — определяет обработку пробельных символов и переносов строк внутри текста.