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.

Die text-anchor CSS Eigenschaft richtet eine Box aus, die eine Textzeichenfolge enthält, wobei der Umbruchbereich von der inline-size Eigenschaft bestimmt wird. Der Text wird dann relativ zum Ankerpunkt des Elements platziert, der mit den x und y (oder dx und dy) Attributen definiert ist. Falls vorhanden, überschreibt der Wert der CSS-Eigenschaft jeden Wert des text-anchor Attributs des Elements.

Jedes einzelne Textfragment innerhalb eines Elements wird unabhängig ausgerichtet; daher wird ein mehrzeiliges <text> Element jede Textzeile gemäß dem Wert von text-anchor ausrichten. text-anchor Werte haben nur Einfluss auf die SVG-Elemente <text>, <textPath> und <tspan>. text-anchor gilt nicht für automatisch umbrochenen Text; dafür siehe text-align.

Syntax

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;

Werte

start

Richtet den Text so aus, dass der Inline-Start der Textzeichenfolge mit dem Ankerpunkt ausgerichtet ist. Diese Ausrichtung bezieht sich auf die Schreibrichtung des Textes; so wird zum Beispiel bei rechts-nach-links und oben-nach-unten eine Schreibrichtung der Text links vom Ankerpunkt platziert. Wenn die Inline-Richtung des Textes vertikal ist, wie bei vielen asiatischen Sprachen, ist die obere Kante des Textes mit dem Ankerpunkt ausgerichtet.

middle

Richtet den Text so aus, dass die Mitte (Mittelpunkt) des Inline-Rahmens der Textzeichenfolge mit dem Ankerpunkt ausgerichtet ist.

end

Richtet den Text so aus, dass das Inline-Ende der Textzeichenfolge mit dem Ankerpunkt ausgerichtet ist. Diese Ausrichtung bezieht sich auf die Schreibrichtung des Textes; so wird beispielsweise bei rechts-nach-links und oben-nach-unten Schreibrichtung der Text rechts vom Ankerpunkt platziert. Wenn die Inline-Richtung des Textes vertikal ist, wie bei vielen asiatischen Sprachen, ist die untere Kante des Textes mit dem Ankerpunkt ausgerichtet.

Formale Definition

Anfangswertstart
Anwendbar auf<text>, <textPath>, and <tspan> elements in <svg>
VererbtJa
Berechneter Wertwie angegeben
Animationstypdiskret

Formale Syntax

text-anchor = 
  start   |
  middle  |
  end

Beispiel

Drei <text> Elemente erhalten die gleiche x Position, aber unterschiedliche Werte für text-anchor. Eine gestrichelte rote Linie ist enthalten, um die x-Achsen-Position aller drei Ankerpunkte zu markieren.

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

Spezifikationen

Specification
Scalable Vector Graphics (SVG) 2
# TextAnchorProperty

Browser-Kompatibilität

Siehe auch