text-box-trim
Limited availability
This feature is not Baseline because it does not work in some of the most widely-used browsers.
Die text-box-trim CSS Eigenschaft spezifiziert, welche der oberen und unteren Ränder von Textinhalt von einem Text-Element Block-Container abgeschnitten werden sollen.
Der vertikale Abstand unterscheidet sich zwischen Schriften, was eine einheitliche Satzgestaltung historisch herausfordernd im Web macht. Die text-box-trim Eigenschaft — zusammen mit ihrer Gegenparteigkeit text-box-edge, welche definiert, wie viel Platz abgeschnitten werden soll — erleichtert das Erreichen einer konsistenten vertikalen Abstandsgestaltung von Text.
Hinweis:
Die text-box Kurzschreibweise kann verwendet werden, um die text-box-trim und text-box-edge Werte in einer einzigen Deklaration anzugeben.
Syntax
/* Keywords */
text-box-trim: none;
text-box-trim: trim-both;
text-box-trim: trim-start;
text-box-trim: trim-end;
/* Global values */
text-box-trim: inherit;
text-box-trim: initial;
text-box-trim: revert;
text-box-trim: revert-layer;
text-box-trim: unset;
Wert
Der Wert der text-box-trim Eigenschaft kann mit einem der folgenden Schlüsselwörter spezifiziert werden:
none-
Der Standardwert. Kein Platz wird vom Text abgeschnitten.
trim-both-
Sowohl der Start- (oben) als auch der Endrand (unten) werden abgeschnitten.
trim-start-
Der Startrand (oben) wird abgeschnitten.
trim-end-
Der Endrand (unten) wird abgeschnitten.
Beschreibung
Die Höhe von ausschließlich textlichem Inhalt ist relativ zur Höhe der Schriftart. In digitalen Schriftdateien umfasst die Höhe alle Zeichen, einschließlich Großbuchstaben, Oberlängen, Unterlängen usw. Unterschiedliche Schriften haben unterschiedliche Basislinienhöhen, was bedeutet, dass Textzeilen mit der gleichen font-size Linienboxen unterschiedlicher Höhe erzeugen, was die Erscheinung des Zeilenabstands beeinflusst.
Die text-box-trim Eigenschaft ermöglicht es Ihnen, die oberen und unteren Ränder des Textblockcontainers zu beschneiden, was es erleichtert, den Textabstand in Blockrichtung zu kontrollieren.
Die tatsächliche Menge des abgeschnittenen Raums wird mit der text-box-edge Eigenschaft angegeben. Zum Beispiel können Sie wählen, die obere Kante in Übereinstimmung mit den Großbuchstaben oder Kleinbuchstaben einer Schrift zu beschneiden, und die untere Kante bündig mit der Basislinie der Schrift.
Formale Definition
| Anfangswert | none |
|---|---|
| Anwendbar auf | Block containers and inline boxes |
| Vererbt | Nein |
| Berechneter Wert | the specified keyword |
| Animationstyp | diskret |
Formale Syntax
Beispiele
Grundlegende Verwendung von text-box-trim
Im folgenden Beispiel setzen wir text-box-edge: cap alphabetic auf zwei Absätze, was die obere Kante der Text-Element-Blockcontainer mit der Oberseite der Großbuchstaben und die untere Kante bündig mit der Textbasislinie beschneidet.
Wir setzen dann text-box-trim Werte von trim-end auf dem ersten und trim-both auf dem zweiten Absatz. Dies führt dazu, dass der erste Absatz nur seine untere Kante abgeschnitten hat, während der zweite sowohl die obere als auch untere Kante abgeschnitten hat.
p {
text-box-edge: cap alphabetic;
border-top: 5px solid magenta;
border-bottom: 5px solid magenta;
}
.one {
text-box-trim: trim-end;
}
.two {
text-box-trim: trim-both;
}
Ergebnis
Die Ausgabe ist wie folgt. Beachten Sie, wie wir auf jedem Absatz einen oberen und unteren Rand eingeschlossen haben, damit Sie sehen können, wie der Raum in jedem Fall abgeschnitten wurde.
Interaktive text-box-trim und text-box-edge Wertvergleich
In diesem Beispiel bieten wir eine Benutzeroberfläche, die es Ihnen ermöglicht, die text-box-trim und text-box-edge Werte festzulegen, die auf einen Textabsatz angewendet werden.
HTML
In unserem HTML schließen wir drei Hauptpunkte ein:
- Drei
Elemente, die es Ihnen ermöglichen festzulegen, welche Ränder des Absatzes beschnitten werden sollen (dertext-box-trimWert) und wie viel Platz von den Blockstart- und Blockendkanten des Absatzes abgeschnitten werden soll (dertext-box-edgeWert). - Ein
Element, das den Text enthält, auf den dietext-box-*Werte angewendet werden. Dieser Absatz hatcontenteditable, damit Sie den Text bearbeiten können. - Ein
Element, das die auf den Absatz angewendetentext-box-*Deklarationen anzeigt. Dies wird aktualisiert, wenn eine Auswahl getroffen wird.
Wir importieren auch eine Schrift von dem Google Fonts-Service, die auf den Text unseres Demos angewendet wird.
Wir haben den genauen HTML-Code zur Kürze verborgen.
CSS
In unserem CSS verwenden wir die importierte Schrift auf das Element und gestalten die Benutzeroberfläche mit flexbox. Wir haben den Großteil des CSS-Codes der Kürze halber verborgen, aber unten zeigen wir die Regeln, die den Absatz mit den text-box-* Effekten stilisieren und das , das die angewendeten text-box-* Regeln anzeigt:
p {
margin: 0;
font-size: 6rem;
font-weight: bold;
border-top: 5px solid magenta;
border-bottom: 5px solid magenta;
}
output {
border: 2px solid gray;
border-radius: 10px;
padding: 10px;
margin: 0;
width: fit-content;
}
Auch hier ist zu beachten, dass wir einen oberen und unteren Rand auf den .display Absatz eingeschlossen haben, damit Sie sehen können, wie sich der beschnittene Raum ändert, wenn verschiedene text-box-* Werte ausgewählt werden.
JavaScript
Im JavaScript beginnen wir mit dem Erfassen von Referenzen zu den drei Elementen und zwei Elementen:
const boxTrimSelect = document.getElementById("box-trim");
const trimOverSelect = document.getElementById("trim-over");
const trimUnderSelect = document.getElementById("trim-under");
const displayElem = document.querySelector("p");
const codeElem = document.querySelector("output");
Als nächstes definieren wir eine Funktion namens setEdgeTrim(). Diese wendet einen text-box Wert auf den Absatz basierend auf den Werten der Elemente an und gibt auch die angewendeten Deklarationen an die Ausgabe aus (sowohl die ausführliche als auch die Kurzschriftäquivalente):
function setEdgeTrim() {
const textBoxTrimValue = boxTrimSelect.value;
const textBoxEdgeValue = `${trimOverSelect.value} ${trimUnderSelect.value}`;
displayElem.style.textBox = `${textBoxTrimValue} ${textBoxEdgeValue}`;
codeElem.innerHTML = `
text-box-trim: ${textBoxTrimValue}
text-box-edge: ${textBoxEdgeValue}
Shorthand equivalent:
text-box: ${textBoxTrimValue} ${textBoxEdgeValue}
`;
}
Im letzten Teil des JavaScript führen wir die setEdgeTrim() Funktion einmal aus, um einen Anfangszustand für die Benutzeroberfläche festzulegen. Wir wenden dann change Ereignislistener auf alle Elemente an (via addEventListener), damit setEdgeTrim() ausgeführt wird, wann immer einer der Werte sich ändert, um die Benutzeroberfläche entsprechend zu aktualisieren:
setEdgeTrim();
boxTrimSelect.addEventListener("change", setEdgeTrim);
trimOverSelect.addEventListener("change", setEdgeTrim);
trimUnderSelect.addEventListener("change", setEdgeTrim);
Ergebnis
Die Ausgabe ist wie folgt:
text-box-trim ist initial auf trim-both gesetzt, was bedeutet, dass die obere und untere Kante des Absatzes beschnitten werden. text-box-edge ist anfänglich auf cap alphabetic gesetzt, was bedeutet, dass der Text bündig mit der Oberseite der Großbuchstaben an der Startkante und bündig mit der Basislinie an der Endkante beschnitten wird.
Versuchen Sie, die Werte zu ändern, um zu sehen, wie sie sich auf den Anzeigetext auswirken.
Spezifikationen
| Specification |
|---|
| CSS Inline Layout Module Level 3 # text-box-trim |
Browser-Kompatibilität
Siehe auch
text-box,text-box-edge- CSS inline layout Modul
- CSS text-box-trim auf developer.chrome.com (2025)