initial-letter

可用性有限

此特性不是基线特性，因为它在一些最广泛使用的浏览器中不起作用。

initial-letter CSS 属性设置首字下沉、凸起和下沉首字母的尺寸和下沉量。此属性应用于 ::first-letter 伪元素和块容器的行内级第一个子元素。

语法

css

/* 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` 伪元素和块容器的行内级第一个子元素
继承性	否
计算值	同指定值
动画类型	按计算值类型

正式语法

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

示例

设置首字母尺寸

HTML

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

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

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

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 内联布局模块级别 3 # sizing-drop-initials

浏览器兼容性

另见

帮助改进 MDN

了解如何贡献

此页面最后由MDN 贡献者于2025 年 10 月 1 日修改。

在 GitHub 上查看此页面 • 报告此内容的问题