baseline-shift
Baseline
2026
*
Newly available
Since March 2026, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.
* Some parts of this feature may have varying levels of support.
Thuộc tính baseline-shift CSS dịch chuyển đường cơ sở chủ đạo của một phần tử văn bản so với đường cơ sở chủ đạo của phần tử văn bản cha. Phần tử được dịch chuyển có thể là chỉ số trên hoặc chỉ số dưới. Nếu thuộc tính có mặt, giá trị của nó sẽ ghi đè thuộc tính SVG baseline-shift của phần tử.
Note:
Thuộc tính baseline-shift chỉ áp dụng cho các phần tử <textPath> và <tspan> được lồng trong <svg>. Nó không áp dụng cho các phần tử SVG, HTML hoặc pseudo-element khác.
Cú pháp
/* Giá trị <length-percentage> */
baseline-shift: -0.5px;
baseline-shift: 4%;
/* Giá trị từ khóa */
baseline-shift: sub;
baseline-shift: super;
/* Giá trị toàn cục */
baseline-shift: inherit;
baseline-shift: initial;
baseline-shift: revert;
baseline-shift: revert-layer;
baseline-shift: unset;
Giá trị
sub-
Đường cơ sở chủ đạo được dịch chuyển đến vị trí mặc định cho chỉ số dưới.
super-
Đường cơ sở chủ đạo được dịch chuyển đến vị trí mặc định cho chỉ số trên.
<length-percentage>-
Nâng lên (nếu dương) hoặc hạ xuống (nếu âm) đường cơ sở chủ đạo của phần tử văn bản theo độ dài hoặc phần trăm đã chỉ định, với phần trăm tính tương đối so với
line-heightcủa đường cơ sở chủ đạo của phần tử văn bản cha.
Định nghĩa chính thức
| Initial value | 0 |
|---|---|
| Applies to | inline-level boxes and SVG text content elements |
| Inherited | no |
| Percentages | refer to the used value of line-height |
| Computed value | the specified keyword or a computed |
| Animation type | by computed value type |
Cú pháp chính thức
baseline-shift =
<length-percentage> |
sub |
super |
top |
center |
bottom
<length-percentage> =
<length> |
<percentage>
Ví dụ
Sử dụng giá trị từ khóa
Ví dụ này minh họa cách dùng cơ bản của các giá trị từ khóa sub và super của thuộc tính baseline-shift, cũng như cách thuộc tính CSS baseline-shift ưu tiên hơn thuộc tính SVG baseline-shift.
HTML
Chúng ta định nghĩa một SVG với hai phần tử <text> SVG, mỗi phần tử chứa một phần tử <tspan> với thuộc tính SVG baseline-shift được đặt trên đó.
<svg viewBox="0 0 500 120" xmlns="http://www.w3.org/2000/svg">
<text x="10" y="50">
Ceci
<tspan baseline-shift="super">n'est pas</tspan>
une pipe super!
</text>
<text x="10" y="90">
Ceci
<tspan baseline-shift="sub">n'est pas</tspan>
une pipe sub!
</text>
</svg>
SVG được lặp lại ba lần; chúng tôi chỉ hiển thị một bản sao cho ngắn gọn.
CSS
Chúng ta làm cho chữ trong cả ba hình SVG lớn và cursive, thêm màu để phân biệt nội dung bên trong các phần tử <tspan>.
Chúng ta đặt giá trị thuộc tính baseline-shift thành sub trên phần tử <tspan> của SVG thứ hai và super trên SVG thứ ba. SVG đầu tiên không có CSS bổ sung nào được áp dụng.
text {
font-family: cursive;
font-size: 2rem;
}
[baseline-shift="sub"] {
fill: deeppink;
}
[baseline-shift="super"] {
fill: rebeccapurple;
}
svg:nth-of-type(2) tspan {
baseline-shift: sub;
}
svg:nth-of-type(3) tspan {
baseline-shift: super;
}
Kết quả
Các giá trị thuộc tính SVG baseline-shift được dùng trong SVG đầu tiên. Trong SVG thứ hai và thứ ba, các giá trị CSS baseline-shift ghi đè các giá trị thuộc tính.
Đặc tả
| Specification |
|---|
| CSS Inline Layout Module Level 3 # baseline-shift-property |
| Scalable Vector Graphics (SVG) 2 # BaselineShiftProperty |
Tương thích trình duyệt
Xem thêm
- Thuộc tính SVG
baseline-shift - Các thuộc tính trình bày:
baseline-shift,clip-rule,color-interpolation-filters,fill-opacity,fill-rule,fill,marker-end,marker-mid,marker-start,shape-rendering,stop-color,stop-opacity,stroke,stroke-dasharray,stroke-dashoffset,stroke-linecap,stroke-linejoin,stroke-miterlimit,stroke-opacity,stroke-width,text-anchor, vàvector-effect