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 上檢視此頁面 • 報告此內容的問題