висящая пунктуация

Ограниченная доступность

Эта функция не относится к Baseline, так как она не работает в некоторых из наиболее широко используемых браузеров.

Свойство 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

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

всем символам в категориях Юникода Ps, Pf, Pi
кавычкам U+0027 АПОСТРОФ (') и U+0022 КАВЫЧКА (").

last

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

всем символам в категориях Юникода Pe, Pf, Pi
кавычкам U+0027 АПОСТРОФ (') и U+0022 КАВЫЧКА (").

allow-end

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

Точки и запятые, которые могут висеть, включают:

U+002C, ЗАПЯТАЯ
U+002E, ТОЧКА
U+060C, АРАБСКАЯ ЗАПЯТАЯ
U+06D4, АРАБСКАЯ ТОЧКА
U+3001, ИДЕОГРАФИЧЕСКАЯ ЗАПЯТАЯ
U+3002, ИДЕОГРАФИЧЕСКАЯ ТОЧКА
U+FF0C, ПОЛНАЯ ЗАПЯТАЯ
U+FF0E, ПОЛНАЯ ТОЧКА
U+FE50, МАЛЕНЬКАЯ ЗАПЯТАЯ
U+FE51, МАЛЕНЬКАЯ ИДЕОГРАФИЧЕСКАЯ ЗАПЯТАЯ
U+FE52, МАЛЕНЬКАЯ ТОЧКА
U+FF61, ПОЛОВИННАЯ ИДЕОГРАФИЧЕСКАЯ ТОЧКА
U+FF64, ПОЛОВИННАЯ ИДЕОГРАФИЧЕСКАЯ ЗАПЯТАЯ

Средства отображения могут включать дополнительные символы.

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

Начальное значение	`none`
Применимо к	всем элементам
Наследуется	да
Вычисленное значение	как указано
Тип анимации	дискретный

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

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;
}

Результат

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

Спецификация
CSS Модуль текста уровень 3 # hanging-punctuation-property

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

	Рабочие столы					Мобильные устройства
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox for Android	Opera Android	Safari на iOS	Samsung Internet	WebView Android
`hanging-punctuation`	Нет	Нет	Нет	Нет	10 Символы `U+0027` и `U+0022` не поддерживаются ключевыми словами `first` и `last`.	Нет	Нет	Нет	10 Символы `U+0027` и `U+0022` не поддерживаются ключевыми словами `first` и `last`.	Нет	Нет
`allow-end`	Нет	Нет	Нет	Нет	≤13.1	Нет	Нет	Нет	≤13.4	Нет	Нет
`first`	Нет	Нет	Нет	Нет	≤13.1	Нет	Нет	Нет	≤13.4	Нет	Нет
`last`	Нет	Нет	Нет	Нет	≤13.1	Нет	Нет	Нет	≤13.4	Нет	Нет
`none`	Нет	Нет	Нет	Нет	≤13.1	Нет	Нет	Нет	≤13.4	Нет	Нет

См. также

© 2005–2024 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/hanging-punctuation