hanging-punctuation

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

Текст

• hanging-punctuation
• hyphens
• letter-spacing
• line-break
• overflow-wrap
• paint-order
• tab-size
• text-align
• text-align-last
• text-indent
• text-justify
• text-size-adjust
• text-transform
• white-space
• word-break
• word-spacing

• letter-spacing
• text-decoration
• text-decoration-color
• text-decoration-line
• text-decoration-style
• text-decoration-thickness
• text-decoration-skip
• text-decoration-skip-ink
• text-emphasis
• text-emphasis-color
• text-emphasis-position
• text-emphasis-style
• text-indent
• text-rendering
• text-shadow
• text-underline-position
• text-transform
• white-space
• word-spacing

Синтаксис

/* Значения ключевых слов */
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

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

Точка или запятая в конце строки будет вынесена, если нет лучшего варианта для выравнивания.

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

• CSS Text Module Level 3

Поддержка браузерами

• Safari 10+

Пример

HTMLCSSРезультат

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

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

Ссылки

• hanging-punctuation ^{MDN (рус.)}

Комментарии