hanging-punctuation

Это экспериментальная технология
Так как спецификация этой технологии ещё не стабилизировалась, смотрите таблицу совместимости по поводу использования в различных браузерах. Также заметьте, что синтаксис и поведение экспериментальной технологии может измениться в будущих версиях браузеров, вслед за изменениями спецификации.

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

/* Значения ключевых слов */
hanging-punctuation: none;
hanging-punctuation: first;
hanging-punctuation: last;
hanging-punctuation: force-end;
hanging-punctuation: allow-end;

/* Два ключевых слова */
hanging-punctuation: first force-end;
hanging-punctuation: first allow-end;
hanging-punctuation: first last;
hanging-punctuation: last force-end;
hanging-punctuation: last allow-end;

/* Три ключевых слова */
hanging-punctuation: first force-end last;
hanging-punctuation: first allow-end last;

/* Общие значения */
hanging-punctuation: inherit;
hanging-punctuation: initial;
hanging-punctuation: unset;
Начальное значениеnone
Применяется квсе элементы
Наследуетсяда
Отображениевизуальный
Обработка значениякак указано
Animation typediscrete
Канонический порядокуникальный неоднозначный порядок, определённый формальной грамматикой

Синтаксис

Свойство hanging-punctuation  может быть определено с помощью одного, двух или трех ключевых слов.

  • Для одного значения может быть использовано любое из описанных ниже значений.
  • Для двух значений используются следующие варианты:
    • first вместе с одним из last, allow-end или force-end
    • last вместе с одним из first, allow-end или force-end
  • Для трех значений используются один из следующих вариантов:
    • first, allow-end и last
    • first, force-end и last

Значения

none
Никакие символы не выносятся.
first
Открывающая скобка или кавычка в начале первой строки выровненного элемента будет вынесена.
last
Закрывающая скобка или кавычка последней строки выровненного элемента будет вынесена.
force-end
Точка или запятая в конце строки выносится.
allow-end
Точка или запятая в конце строки будет вынесена, если нет лучшего варианта для выравнивания.

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

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

Пример

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

Результат

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

Specification Status Comment
CSS Text Module Level 3
Определение 'hanging-punctuation' в этой спецификации.
Рабочий черновик Initial definition

Браузерная совместимость

Update compatibility data on GitHub
КомпьютерыМобильные
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome для AndroidFirefox для AndroidOpera для AndroidSafari on iOSSamsung Internet
hanging-punctuation
Экспериментальная
Chrome Нет поддержки НетEdge Нет поддержки НетFirefox Нет поддержки НетIE Нет поддержки НетOpera Нет поддержки НетSafari Полная поддержка 10WebView Android Нет поддержки НетChrome Android Нет поддержки НетFirefox Android Нет поддержки НетOpera Android Нет поддержки НетSafari iOS Полная поддержка 10Samsung Internet Android Нет поддержки Нет

Легенда

Полная поддержка  
Полная поддержка
Нет поддержки  
Нет поддержки
Экспериментальная. Ожидаемое поведение может измениться в будущем.
Экспериментальная. Ожидаемое поведение может измениться в будущем.