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 上查看此页面 • 报告此内容的问题