text-box-trim

Der Wert der text-box-trim Eigenschaft kann als eines der folgenden Schlüsselwörter angegeben werden:

none

Der Standardwert. Es wird kein Platz vom Text abgeschnitten.

trim-both

Die Startkante (oben) und Endkante (unten) werden beide abgeschnitten.

trim-start

Die Startkante (oben) wird abgeschnitten.

trim-end

Die Endkante (unten) wird abgeschnitten.

Die Höhe von reinem Textinhalt ist relativ zur Höhe der Schrift. In digitalen Schriftdateien umfasst die Höhe alle Zeichen, einschließlich Großbuchstaben, Oberlängen, Unterlängen usw. Verschiedene Schriften haben unterschiedliche Basiszeilenhöhen, was bedeutet, dass Textzeilen mit derselben font-size unterschiedlich hohe Zeilenboxen erzeugen, was das Erscheinungsbild des Abstands zwischen den Zeilen beeinflusst.

Die text-box-trim Eigenschaft erlaubt es, die obere und untere Kante des Blockcontainers des Textes abzuschneiden, was die Kontrolle des Textabstands in Blockrichtung erleichtert.

Die tatsächliche Menge des abgeschnittenen Raums wird durch die text-box-edge Eigenschaft bestimmt. Zum Beispiel können Sie wählen, die obere Kante in Übereinstimmung mit den Großbuchstaben oder Kleinbuchstaben einer Schrift abzuschneiden und die untere Kante bündig mit der Basislinie der Schrift.

text-box-trim = 
  none        |
  trim-start  |
  trim-end    |
  trim-both   

Im folgenden Beispiel setzen wir text-box-edge: cap alphabetic auf zwei Absätzen, wodurch die obere Kante der Blockcontainer der Textelemente auf die Oberseite der Großbuchstaben und die untere Kante bündig mit der Textbasislinie abgeschnitten wird.

Wir setzen dann text-box-trim Werte von trim-end beim ersten Absatz und trim-both beim zweiten Absatz. Dies führt dazu, dass beim ersten Absatz nur die untere Kante abgeschnitten wird, während beim zweiten Absatz sowohl die obere als auch die untere Kante abgeschnitten wird.

<p class="one">This is .one</p>

<p class="two">This is .two</p>

html {
  font-family: sans-serif;
  height: 100%;
}

body {
  height: inherit;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 100px;
}

p {
  margin: 0;
  font-size: 6rem;
  font-weight: bold;
}

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 eine obere und untere Umrandung auf jedem Absatz eingefügt haben, damit Sie sehen können, wie der Platz in jedem Fall abgeschnitten wurde.

In diesem Beispiel bieten wir eine Benutzeroberfläche, die es Ihnen ermöglicht, die auf einen Textabsatz angewendeten text-box-trim und text-box-edge Werte auszuwählen.

HTML

In unserem HTML haben wir drei Hauptkomponenten:

• Drei <select> Elemente, die es Ihnen ermöglichen, festzulegen, welche Kanten des Absatzes abgeschnitten werden sollen (der text-box-trim Wert) und wie viel Platz von den Blockanfangs- und Blockendkanten des Absatzes (der text-box-edge Wert) abgeschnitten werden soll.
• Ein <p> Element, das Text enthält, auf das die text-box-* Werte angewendet werden. Dieser Absatz ist mit contenteditable versehen, sodass Sie den Text bearbeiten können.
• Ein <output> Element, das die auf den Absatz angewendeten text-box-* Deklarationen anzeigt. Dies wird aktualisiert, wenn eine Auswahl getroffen wird.

Wir importieren auch eine Schriftart von dem Google Fonts Dienst, um sie auf den Text unseres Demos anzuwenden.

Wir haben den genauen HTML-Code zur Kürze versteckt.

<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
  href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap"
  rel="stylesheet" />
<section>
  <div>
    <label for="box-trim">Select edge(s) to trim:</label>
    <select id="box-trim">
      <option>none</option>
      <option>trim-start</option>
      <option>trim-end</option>
      <option selected>trim-both</option>
    </select>
  </div>
  <div>
    <label for="trim-over">Select trim over (start) value:</label>
    <select id="trim-over">
      <option>text</option>
      <option selected>cap</option>
      <option>ex</option>
    </select>
  </div>
</section>
<p class="display" contenteditable="">Holly Golightly</p>
<section>
  <div>
    <label for="trim-under">Select trim under (end) value:</label>
    <select id="trim-under">
      <option>text</option>
      <option selected>alphabetic</option>
    </select>
  </div>
</section>
<output></output>

CSS

In unserem CSS wenden wir die importierte Schrift auf das <html> Element an und gestalten die Benutzeroberfläche mit Flexbox. Wir haben den größten Teil des CSS-Codes zur Kürze versteckt, aber unten zeigen wir die Regeln, die den Absatz, auf den die text-box-* Effekte angewendet werden, und das <output>, das die text-box-* Regeln anzeigt, anwenden:

html {
  font-family: "Roboto", sans-serif;
  height: 100%;
}

body {
  height: inherit;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 30px;
}

section {
  display: flex;
  justify-content: space-between;
}

section:nth-of-type(2) {
  justify-content: flex-end;
  padding-bottom: 30px;
}

select {
  width: 6rem;
}

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

Beachten Sie erneut, wie wir eine obere und untere Umrandung auf dem .display Absatz eingefügt haben, damit Sie sehen können, wie sich der abgeschnittene Raum verändert, wenn verschiedene text-box-* Werte ausgewählt werden.

JavaScript

Im JavaScript beginnen wir damit, Referenzen auf die drei <select> Elemente und zwei <p> Elemente zu sammeln:

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 <select> Elemente an und gibt auch die angewendeten Deklarationen an die Ausgabe aus (sowohl die Langform als auch die Kurzformäquivalente):

function setEdgeTrim() {
  const textBoxTrimValue = boxTrimSelect.value;
  const textBoxEdgeValue = `${trimOverSelect.value} ${trimUnderSelect.value}`;
  displayElem.style.textBox = `${textBoxTrimValue} ${textBoxEdgeValue}`;

  codeElem.innerHTML = `
    <span><code>text-box-trim: ${textBoxTrimValue}</code></span>
    <br>
    <span><code>text-box-edge: ${textBoxEdgeValue}</code></span>
    <br><br>
    <span>Shorthand equivalent:</span>
    <br><br>
    <span><code>text-box: ${textBoxTrimValue} ${textBoxEdgeValue}</code></span>
  `;
}

Im letzten Teil des JavaScripts führen wir die setEdgeTrim() Funktion einmal aus, um einen Anfangszustand für die Benutzeroberfläche zu setzen. Wir wenden dann change Ereignislistener auf alle <select> Elemente an (über addEventListener), sodass setEdgeTrim() ausgeführt wird, wann immer einer der <select> Werte geändert wird, 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 anfänglich auf trim-both eingestellt, was bedeutet, dass die oberen und unteren Kanten des Absatzes abgeschnitten werden. text-box-edge ist anfänglich auf cap alphabetic eingestellt, 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 geschnitten ist.

Versuchen Sie, die <select> Werte zu ändern, um den Effekt zu sehen, den sie auf den Anzeigetext haben.

• text-box, text-box-edge
• CSS Inline Layout Modul
• CSS text-box-trim auf developer.chrome.com (2025)