Заглавная буква

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

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

Свойство initial-letter CSS задаёт размер и положение выпадающих, выступающих и углублённых заглавных букв. Это свойство применяется к псевдоэлементам ::first-letter и первому inline-элементу внутри блочного контейнера.

Синтаксис

/* Keyword values */
initial-letter: normal;

/* One value */
initial-letter: 3; /* 3 lines tall, baseline at line 3 */
initial-letter: 1.5; /* 1.5 lines tall, baseline at line 2 */

/* Two values */
initial-letter: 3 2; /* 3 lines tall, baseline at line 2 (raised 1 line) */
initial-letter: 3 1; /* 3 lines tall, baseline unchanged (raised 2 lines) */

/* Global values */
initial-letter: inherit;
initial-letter: initial;
initial-letter: revert;
initial-letter: revert-layer;
initial-letter: unset;

Значения

Ключевое слово normal, или <number> с необязательным <integer>.

normal: Нет специального эффекта заглавной буквы. Текст отображается обычно.
<number>: Определяет размер заглавной буквы, в терминах занимаемых строк. Отрицательные значения не допускаются.
<integer>: Определяет количество строк, на которые заглавная буква должна опускаться, когда задан её размер. Значения должны быть больше нуля. Если опущено, оно дублирует значение размера, округлённое до ближайшего положительного целого числа.

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

Начальное значение	`normal`
Применяется к	псевдоэлементам `::first-letter` и первому inline-потомку блочного контейнера
Наследуется	нет
Вычисленное значение	как указано
Тип анимации	по типу вычисленного значения

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

initial-letter = 
  normal                               |
  <number [1,∞]> <integer [1,∞]>       |
  <number [1,∞]> && [ drop | raise ]?

Примеры

Установка размера заглавной буквы

HTML

<p class="normal">Initial letter is normal</p>
<p class="onefive">Initial letter occupies 1.5 lines</p>
<p class="three">Initial letter occupies 3 lines</p>

CSS

.normal::first-letter {
  -webkit-initial-letter: normal;
  initial-letter: normal;
}

.onefive::first-letter {
  -webkit-initial-letter: 1.5;
  initial-letter: 1.5;
}

.three::first-letter {
  -webkit-initial-letter: 3;
  initial-letter: 3;
}

p {
  outline: 1px dashed red;
}

Результат

Установка значения смещения

В этом примере все заглавные буквы имеют одинаковый размер, но с разными значениями смещения.

HTML

<p class="four">Initial letter: Sink value = 4</p>
<p class="same">Initial letter: Sink value not declared (same as size)</p>
<p class="two">Initial letter: Sink value = 2</p>
<p class="one">Initial letter: Sink value = 1</p>

CSS

.four::first-letter {
  -webkit-initial-letter: 3 4;
  initial-letter: 3 4;
}

.same::first-letter {
  -webkit-initial-letter: 3;
  initial-letter: 3;
}

.two::first-letter {
  -webkit-initial-letter: 3 2;
  initial-letter: 3 2;
}

.one::first-letter {
  -webkit-initial-letter: 3 1;
  initial-letter: 3 1;
}

p {
  outline: 1px dashed red;
}

Результат

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

Спецификация
CSS Inline Layout Module Level 3 # sizing-drop-initials

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

	Десктоп					Мобильные
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox для Android	Opera Android	Safari на iOS	Samsung Internet	WebView Android
`initial-letter`	110	110	Нет	96	9 См. баг 229090 для свойства без префикса.	110	Нет	74	9 См. баг 229090 для свойства без префикса.	21.0	110
`normal`	110	110	Нет	96	9	110	Нет	74	9	21.0	110

См. также

::first-letter
:first-child
Выпадающие заглавные буквы в CSS через Oddbird (2017)

© 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/initial-letter