Это экспериментальная технология
Так как спецификация этой технологии ещё не стабилизировалась, смотрите таблицу совместимости по поводу использования в различных браузерах. Также заметьте, что синтаксис и поведение экспериментальной технологии может измениться в будущих версиях браузеров, вслед за изменениями спецификации.
Свойство 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 type | discrete |
Синтаксис
Свойство 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
- Точка или запятая в конце строки будет вынесена, если нет лучшего варианта для выравнивания.
Формальный синтаксис
Пример
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 |
Браузерная совместимость
BCD tables only load in the browser
Таблица совместимости была сформирована из структурированных данных. Если вы хотите уточнить информацию, пожалуйста, склонируйте репозиторий https://github.com/mdn/browser-compat-data и отправьте нам pull-реквест.