text-anchor
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since August 2016.
Thuộc tính text-anchor của CSS căn chỉnh hộp chứa một chuỗi văn bản mà vùng bao quanh được xác định từ thuộc tính inline-size, và văn bản sau đó được đặt tương đối so với điểm neo của phần tử, điểm này được xác định bằng các thuộc tính x và y (hoặc dx và dy). Nếu có, giá trị của thuộc tính CSS sẽ ghi đè bất kỳ giá trị nào của thuộc tính text-anchor của phần tử.
Mỗi đoạn văn bản riêng lẻ trong một phần tử được căn chỉnh độc lập; do đó, phần tử <text> nhiều dòng sẽ có mỗi dòng văn bản được căn chỉnh theo giá trị của text-anchor. Các giá trị text-anchor chỉ có hiệu lực trên các phần tử SVG <text>, <textPath> và <tspan>. text-anchor không áp dụng cho văn bản tự động xuống dòng; để làm điều đó, hãy xem text-align.
Cú pháp
text-anchor: start;
text-anchor: middle;
text-anchor: end;
/* Giá trị toàn cục */
text-anchor: inherit;
text-anchor: initial;
text-anchor: revert;
text-anchor: revert-layer;
text-anchor: unset;
Giá trị
start-
Căn chỉnh văn bản sao cho đầu nội tuyến của chuỗi văn bản được căn chỉnh với điểm neo. Căn chỉnh này tương đối với hướng viết của văn bản; do đó, ví dụ, trong văn bản viết từ phải sang trái từ trên xuống dưới, văn bản sẽ được đặt ở bên trái điểm neo. Nếu chiều nội tuyến của văn bản là dọc, như với nhiều ngôn ngữ châu Á, cạnh trên của văn bản sẽ được căn chỉnh với điểm neo.
middle-
Căn chỉnh văn bản sao cho tâm (giữa) của hộp nội tuyến của chuỗi văn bản được căn chỉnh với điểm neo.
end-
Căn chỉnh văn bản sao cho cuối nội tuyến của chuỗi văn bản được căn chỉnh với điểm neo. Căn chỉnh này tương đối với hướng viết của văn bản; do đó, ví dụ, trong văn bản viết từ phải sang trái từ trên xuống dưới, văn bản sẽ được đặt ở bên phải điểm neo. Nếu chiều nội tuyến của văn bản là dọc, như với nhiều ngôn ngữ châu Á, cạnh dưới của văn bản sẽ được căn chỉnh với điểm neo.
Định nghĩa chính thức
| Initial value | start |
|---|---|
| Applies to | <text>, <textPath>, and <tspan> elements in <svg> |
| Inherited | yes |
| Computed value | as specified |
| Animation type | discrete |
Cú pháp chính thức
text-anchor =
start |
middle |
end
Ví dụ
Ba phần tử <text> được cho cùng vị trí x, nhưng có các giá trị khác nhau cho text-anchor. Một đường đỏ đứt nét được bao gồm để đánh dấu vị trí trục x của cả ba điểm neo.
<svg
viewBox="0 0 200 150"
height="150"
width="200"
xmlns="http://www.w3.org/2000/svg">
<line
x1="100"
y1="0"
x2="100"
y2="150"
stroke="red"
stroke-dasharray="10,5" />
<text x="100" y="40">Anchored</text>
<text x="100" y="80">Anchored</text>
<text x="100" y="120">Anchored</text>
</svg>
text:nth-of-type(1) {
text-anchor: start;
}
text:nth-of-type(2) {
text-anchor: middle;
}
text:nth-of-type(3) {
text-anchor: end;
}
Thông số kỹ thuật
| Specification |
|---|
| Scalable Vector Graphics (SVG) 2 # TextAnchorProperty |
Khả năng tương thích trình duyệt
Xem thêm
dominant-baseline- Phần tử SVG
<text> - Thuộc tính SVG
text-anchor