Zwei CSS -Eigenschaften für das Trimmtextfeld Whitespace

Mit den Eigenschaften der

und text-box-trim des text-box-edge cs können Entwickler die Menge der leeren Leerzeichen über der ersten Textzeile und unter der letzten Textzeile im Textfeld genau steuern. Diese Lücken machen die vertikale Höhe des Textfelds größer als seine Inhaltshöhe.

Diese Rohlage wird führend (Zeilenabstand) genannt und erscheint über und unter allen Textzeilen (eigentlich zweieinhalb Zeilenabstände), um die Lesbarkeit des Textes zu verbessern. Aber wir möchten nur, dass es zwischen Textzeilen erscheint, oder? Wir möchten nicht, dass es an den oberen und unteren Rändern des Textfelds erscheint, da es unsere Ränder, Fülltätigkeiten, Lücken und andere Abstandsabstände betrifft.

Wenn wir beispielsweise einen Rand von 50px implementieren, der Linienabstand jedoch um 37px steigt, wird es insgesamt einen Platz von 87 PX geben. Dann müssen wir den Rand auf 13px anpassen, um den Speicherplatz 50px in der Praxis zu machen.

Als Designsystem -Typ versuche ich, so viel Konsistenz wie möglich zu halten und so wenige Markierungen wie möglich zu verwenden, was es mir ermöglicht, den benachbarten Bruder Selector () zu verwenden, um eine gemeinsame Regel wie folgt zu erstellen:

/* 当 <element> 后面跟着 <h1> 时 */
<element> + h1 {
  margin-bottom: 13px; /* 而不是 margin-bottom: 50px; */
}</element>
</h1></element>

Diese Methode ist immer noch problematisch, da Sie noch die Berechnungen durchführen müssen (obwohl weniger rechnerisch). Unter Verwendung der Eigenschaften text-box-trim und text-box-edge bedeutet 50px in CSS visuell 50px:

Haftungsausschluss: text-box-trim und text-box-edge sind nur über die Feature -Flags von Chrome 128 und Safari 16.4 sowie die Safari -Technologie -Vorschau ohne Feature -Flaggen zugänglich. In Caniuse finden Sie die neuesten Browser -Unterstützungsinformationen.

Starten Sie von text-box-trim

ist eine CSS -Eigenschaft, die das Trimmen des Textfelds aktiviert. Es hat keinen anderen Zweck an sich, aber es gibt uns Optionen, um zu starten, zu enden, zu beginnen und zu enden oder zu beenden: text-box-trim

text-box-trim: trim-start;
text-box-trim: trim-end;
text-box-trim: trim-both;
text-box-trim: none;

Hinweis: In älteren Webbrowsern müssen Sie möglicherweise einen älteren Wert anstelle eines neuen start/end/both -Wertzustes verwenden. In älteren Webbrowsern müssen Sie möglicherweise trim-start/trim-end/trim-both verwenden. Leider gibt es keine Referenz dafür, daher müssen Sie nur sehen, was funktioniert. top/bottom/both

Nun, wo willst du beschneiden?

Möglicherweise möchten Sie wissen, was ich meine. Bedenken Sie, dass ein typografischer Buchstaben mehrere Peaks aufweist.

Es gibt X -Höhe, die die Oberseite des Buchstabens "x" und andere Kleinbuchstaben (ohne die Aufstieg oder die obere Erweiterung), die Großbuchstabenhöhe, die die Oberseite der Großbuchstaben (wiederum nicht die obere Erweiterung oder die obere Erweiterung oder die obere Erweiterung) markiert, und die oberste Briefe (nicht inklusive Aufstieg oder untere Erweiterung) markiert. Natürlich gibt es auch die Hebehöhe und die Absenkung.

Sie können die Lücke zwischen X -Höhe, Kapitalhöhe oder aufsteigender Höhe und der "Up" -Rand des Textfelds (in dem das obere Schreibpunkt beginnt) und die Lücke zwischen der Buchstabenbasis oder der niedrigeren Schreibhöhe und der "unteren" Kante (wenn text-underline-position auf under eingestellt wird, ab

eingestellt) abschneiden.

schneiden Sie nichts

ab text-box-edge: leading text-box-trim: none bedeutet, dass alle Zeilenabstände enthalten sind. Dies ist das gleiche wie text-box-trim oder aus dem Auslass text-box-edge und text-box-trim: trim-start vollständig. Sie können auch text-box-trim: trim-end verwenden, um die untere Kantenabgabe zu begrenzen oder

zu begrenzen, um die obere Kantenabteilung zu begrenzen. Ja, es gibt viele Möglichkeiten, dies überhaupt nicht zu tun! leading auto Neuere Webbrowser haben vom CSSWG -Spezifikationsarbeitsentwurf abgewichen, indem sie den Wert

gelöscht und trotz der Warnung "nicht veröffentlichen (noch nicht)" (*Achselzucken*) ersetzt.

text-box-edge akzeptiert natürlich auto zwei Werte (Anweisungen zur oberen Kante und dann Anweisungen zur unteren Kante).

muss jedoch separat verwendet werden.

/* 当 <element> 后面跟着 <h1> 时 */
<element> + h1 {
  margin-bottom: 13px; /* 而不是 margin-bottom: 50px; */
}</element>
</h1></element>

auto Ich kann alle Szenarien erklären auto, dass keine von ihnen gültig ist. Ich denke, alles was wir wollen, ist in der Lage, die obere oder untere Kante auf

zu setzen und die andere Kante auf etwas anderes zu setzen, aber genau das ist es nicht. Dies ist eine Frage, aber wir werden bald tiefer graben.

den oberen Teil des Aufzugs und/oder den unteren Teil des unteren Teils

trimmen text auto

Wenn der erste Wert als erster Wert verwendet wird, wird der zweite Wert verwendet. (Ich denke du willst, dass es

text-box-trim: trim-start;
text-box-trim: trim-end;
text-box-trim: trim-both;
text-box-trim: none;

ist, aber es wird nicht sein.)

text text Es ist erwähnenswert, dass die Messungen des Aufzugs und der niedrigeren Höhe von der Schrift selbst (oder nicht!) Stammen, also kann from-font sehr wählerisch sein. Zum Beispiel beinhaltet die Höhe des Aufstiegs für Arial -Schriftarten die Diakritik, die Höhe des Sturzes den Tropfen. Bei Fravances -Schriftarten beinhaltet ich die Höhe des Sturzes. Ich weiß nicht, wie hoch die Höhe des Aufstiegs beinhaltet. Es gibt also eine Diskussion über das Umbenennen von

in

.

Reise nur über der Kapitalhöhe

text-box-edge: auto; /* Works */
text-box-edge: ex auto; /* Doesn't work */
text-box-edge: auto alphabetic; /* Doesn't work */

über die Kapitalhöhe abschneiden:

text auto Denken Sie daran, nicht angemeldete Werte standardmäßig trim-start, nicht trim-both (wie oben gezeigt). Um die untere Kante nicht zu trimmen, müssen Sie

statt

text-box-edge: ex text; /* Valid */
text-box-edge: ex; /* Computed as `text-box-edge: ex text;` */
text-box-edge: text alphabetic; /* Valid */
text-box-edge: text text; /* Valid */
text-box-edge: text; /* Computed as `text-box-edge: text text;` */

:

verwenden

Auslösen der oberen Gehäusehöhe und unterhalb der Buchstabenbasis

, um die obere Gehäusehöhe und unterhalb der Grundlinie des Buchstabens zu schneiden:

/* 当 <element> 后面跟着 <h1> 时 */
<element> + h1 {
  margin-bottom: 13px; /* 而不是 margin-bottom: 50px; */
}</element>
</h1></element>

übrigens ist die Höhe der CAPS -Höhe zu Grundlinienoption der vertikalen Trimmeinstellung von Figma genau dies. Der Entwicklungsmodus generiert jedoch CSS -Code mit veralteten Attributnamen (leading-trim und text-edge) und veralteten Werten (top und bottom).

Auslösen nur oberhalb von x Höhe

Nur über x Höhe trimmen:

text-box-trim: trim-start;
text-box-trim: trim-end;
text-box-trim: trim-both;
text-box-trim: none;

Reise x Höhe oberhalb und unterhalb der Buchstabenbasis

, um die X -Höhe über und unterhalb der Buchstabenbasis zu schneiden:

text-box-edge: auto; /* Works */
text-box-edge: ex auto; /* Doesn't work */
text-box-edge: auto alphabetic; /* Doesn't work */

Reise nur unterhalb der Basislinie der Buchstaben

, um nur unterhalb der Buchstabenbasis zu schneiden, ist das folgende ungültig (Dinge laufen so reibungslos, nicht wahr?):

text-box-edge: ex text; /* Valid */
text-box-edge: ex; /* Computed as `text-box-edge: ex text;` */
text-box-edge: text alphabetic; /* Valid */
text-box-edge: text text; /* Valid */
text-box-edge: text; /* Computed as `text-box-edge: text text;` */

Dies liegt daran, dass der erste Wert immer ein erforderlicher oberer Kantenwert ist, während der zweite Wert ein optionaler Wert mit niedrigerer Kante ist. Dies bedeutet, dass alphabetic kein gültiger oberer Kantenwert ist, selbst wenn dies trim-end bedeutet, dass wir keine bereitstellen. Abgesehen von den ausführlichen Beschwerden können Sie mit der richtigen Syntax einen oberen Randwert deklarieren, auch wenn Sie sie tatsächlich mit trim-end:

abbrechen

text-box-edge: cap; /* Computed as text-box-edge: cap text; */

Wo ist die Hieroglyphen?

Es ist schwer zu wissen, wie sie vor einem Webbrowser beschnitten werden, aber Sie können alles in der Spezifikation lesen. Theoretisch müssen Sie den Wert ideographic-ink für das Trimmen verwenden und den Wert ideographic ohne Trimmen verwenden. Beide werden derzeit nicht unterstützt:

text-box-trim: trim-start; /* Not text-box-trim: trim-both; */
text-box-edge: cap; /* Not computed as text-box-edge: cap text; */

text-box, Abkürzungsattribut

Wenn Sie die Verbundheit des Textfelds nicht mögen, gibt es ein Abkürzung text-box Attribut, das es weniger wichtig macht. Die gleichen Regeln gelten.

text-box-trim: trim-both;
text-box-edge: cap alphabetic;

Der letzte Gedanke

Auf den ersten Blick scheint text-box-trim und text-box-edge nicht so interessant zu sein, aber sie machen die Abstandselemente viel einfacher.

Aber ist der aktuelle Vorschlag der beste Weg, um mit dem Trimmen des Textfelds umzugehen? Persönlich glaube ich nicht. Ich denke, text-box-trim-start und text-box-trim-end würden sinnvoller sein, text-box-trim wird als Abkürzungsattribut verwendet, und text-box-edge wird überhaupt nicht verwendet, aber ich bin bereit, einen vereinfachten und/oder konsistenten Ansatz zu akzeptieren. Was denken Sie?

Es gibt einige andere Bedenken. Sollte es beispielsweise eine Option geben, Unterstriche, Übersteuerung, hängende Interpunktionsmarken oder diakritische Markierungen einzubeziehen? Ich würde ja sagen, besonders wenn Sie text-underline-position: under oder besonders dickes text-decoration-thickness verwenden, da der Abstand zwischen den Elementen kleiner erscheinen lässt.

Das obige ist der detaillierte Inhalt vonZwei CSS -Eigenschaften für das Trimmtextfeld Whitespace. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!