text-anchor

Baseline 已廣泛支援

此功能已相當成熟，可在多種裝置和瀏覽器版本上執行。自 ⁨2016 年 8 月⁩ 起，所有瀏覽器均已提供此功能。

text-anchor CSS 屬性將包含文字字串的框對齊，其中包裹區域由 inline-size 屬性確定，然後文字相對於元素的錨點放置，該錨點使用 x 和 y（或 dx 和 dy）屬性定義。如果存在，CSS 屬性的值將覆蓋元素的 text-anchor 屬性的任何值。

元素內的每個單獨文字片段都是獨立對齊的；因此，多行 <text> 元素的每一行文字都將根據 text-anchor 的值進行對齊。text-anchor 值僅對 <text>、<textPath> 和 <tspan> SVG 元素起作用。text-anchor 不適用於自動換行文字；有關此內容，請參閱 text-align。

語法

css

text-anchor: start;
text-anchor: middle;
text-anchor: end;

/* Global values */
text-anchor: inherit;
text-anchor: initial;
text-anchor: revert;
text-anchor: revert-layer;
text-anchor: unset;

值

start: 對齊文字，使文字字串的行內起始位置與錨點對齊。此對齊方式相對於文字的書寫方向；因此，例如，在從右到左、從上到下的書寫中，文字將放置在錨點的左側。如果文字的行內方向是垂直的，如許多亞洲語言一樣，文字的頂部邊緣與錨點對齊。
middle: 對齊文字，使文字字串的行內框的中心（中間）與錨點對齊。
end: 對齊文字，使文字字串的行內結束位置與錨點對齊。此對齊方式相對於文字的書寫方向；因此，例如，在從右到左、從上到下的書寫中，文字將放置在錨點的右側。如果文字的行內方向是垂直的，如許多亞洲語言一樣，文字的底部邊緣與錨點對齊。

正式定義

初始值	`start`
應用於	`<text>`、`<textPath>` 和 `<tspan>` 元素在 `<svg>` 中
繼承性	是
計算值	同指定值
動畫型別	離散

正式語法

text-anchor = 
  start   |
  middle  |
  end

示例

三個 <text> 元素被賦予相同的 x 位置，但 text-anchor 的值不同。包含一條虛線紅線以標記所有三個錨點的 x 軸位置。

html

<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 {
  font-size: 24px;
}

css

text:nth-of-type(1) {
  text-anchor: start;
}
text:nth-of-type(2) {
  text-anchor: middle;
}
text:nth-of-type(3) {
  text-anchor: end;
}

規範

規範
Scalable Vector Graphics (SVG) 2 # TextAnchorProperty

瀏覽器相容性

另見

幫助改進 MDN

瞭解如何貢獻

此頁面上次由 MDN 貢獻者於 ⁨2025 年 7 月 14 日⁩ 修改。

在 GitHub 上檢視此頁面 • 報告此內容的問題