initial-letter

Limited availability

This feature is not Baseline because it does not work in some of the most widely-used browsers.

Thuộc tính CSS initial-letter đặt kích thước và độ lún cho các chữ cái đầu được thả xuống, nâng lên, và chìm xuống. Thuộc tính này áp dụng cho phần tử giả ::first-letter và các phần tử con đầu tiên ở cấp inline của các container khối.

Cú pháp

css

/* Giá trị từ khóa */
initial-letter: normal;

/* Một giá trị */
initial-letter: 3; /* Cao 3 dòng, đường cơ sở ở dòng 3 */
initial-letter: 1.5; /* Cao 1.5 dòng, đường cơ sở ở dòng 2 */

/* Hai giá trị */
initial-letter: 3 2; /* Cao 3 dòng, đường cơ sở ở dòng 2 (nâng lên 1 dòng) */
initial-letter: 3 1; /* Cao 3 dòng, đường cơ sở không thay đổi (nâng lên 2 dòng) */

/* Giá trị toàn cục */
initial-letter: inherit;
initial-letter: initial;
initial-letter: revert;
initial-letter: revert-layer;
initial-letter: unset;

Giá trị

Giá trị từ khóa normal, hoặc một <number> tùy chọn theo sau bởi một <integer>.

normal: Không có hiệu ứng chữ cái đầu đặc biệt. Văn bản hoạt động bình thường.
<number>: Xác định kích thước của chữ cái đầu, tính theo số dòng mà nó chiếm. Giá trị âm không được phép.
<integer>: Xác định số dòng mà chữ cái đầu cần lún xuống khi kích thước của nó được cho. Giá trị phải lớn hơn không. Nếu bỏ qua, nó sao chép giá trị kích thước, làm tròn xuống số nguyên dương gần nhất.

Định nghĩa hình thức

Initial value	`normal`
Applies to	`::first-letter` pseudo-elements and inline-level first child of a block container
Inherited	no
Computed value	as specified
Animation type	by computed value type

Cú pháp hình thức

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

<integer> = 
  <number-token>

Ví dụ

Đặt kích thước chữ cái đầu

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

Kết quả

Đặt giá trị lún

Trong ví dụ này, tất cả các chữ cái đầu có cùng kích thước, nhưng với các giá trị lún khác nhau.

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

Kết quả

Đặc tả kỹ thuật

Specification
CSS Inline Layout Module Level 3 # sizing-drop-initials

Tương thích trình duyệt

Xem thêm

Help improve MDN

Learn how to contribute

This page was last modified on Jan 1, 1970 by MDN contributors.

View this page on GitHub • Report a problem with this content