Erstens, was ist Linienl?nge? Die Linienl?nge ist die L?nge eines Beh?lters, der einen Teil von Multi-Line-Text enth?lt. "Multi-Line" ist hier der Schlüsselteil, da der Text weniger lesbar wird, wenn der Beginn einer Textlinie zu weit vom Ende der vorherigen Textzeile entfernt ist. Dies führt dazu, dass Benutzer die Linien versehentlich erneut lesen und sich im Allgemeinen beim Lesen verlieren.

Glücklicherweise gibt wir die Richtlinien für die Zug?nglichkeit (WCAG) für die Zug?nglichkeit in den Webinhalten (WCAG) eine ziemlich schwierige Regel: Nicht mehr als 80 Zeichen in einer Zeile (40, wenn die Sprache chinesisch, japanisch oder koreanisch ist), was super einfach zu implementieren ist, indem sie mit Charakteren (CH) -Aneinheiten (CH) implementiert werden k?nnen:

 Breite: 80Ch;

Die Breite von 1Ch entspricht der Breite der Zahl 0 in Ihrer gew?hlten Schriftart, sodass die genaue Breite von der Schriftart abh?ngt.

Einstellen der optimalen Linienl?nge

Nur weil Sie bis zu 80 Zeichen in einer Zeile dürfen, bedeutet dies nicht, dass Sie auf diese Zahl anstreben müssen . Eine Studie des Baymard-Instituts ergab, dass eine Linienl?nge von 50 bis 75 Zeichen die optimale L?nge ist. Dies berücksichtigt, dass kleinere Linienl?ngen mehr Linien und daher mehr M?glichkeiten für Benutzer bedeuten, Lesefehler zu machen.

Davon abgesehen haben wir auch ein reaktionsschnelles Design, über das wir nachdenken k?nnen. Wenn Sie also eine Mindestbreite (z. B. Min-Width: 50Ch) festlegen, ist es keine gute Idee, da es unwahrscheinlich ist, dass Sie 50 Zeichen in eine Linie mit einem Bildschirm/einer Fenstergr??e von 320 Pixel breiten. Es gibt also ein bisschen Nuance, und der beste Weg, um zu handhaben, besteht darin, die Funktionen der Clamp () und min () zu kombinieren:

• CLAMP (): Setzen Sie einen Flüssigkeitswert, der relativ zu einem Beh?lter mit prozentualer Ansichts- oder Container -Abfrageeinheiten ist, jedoch mit minimalen und maximalen Einschr?nkungen.
• min (): Stellen Sie den kleinsten Wert aus einer Liste von von Kommas getrennten Werten fest.

Beginnen wir mit min (). Eines der Argumente ist 93,75 VW. Unter der Annahme, dass sich der Container über das gesamte Ansichtsfenster erstreckt, ist dies gleich 300px, wenn die Ansichtsfensterbreite 320px betr?gt (so dass 20ps Abstand verteilt werden k?nnen, wie Sie sehen) und 1350px, wenn die Ansichtsfensterbreite 1440px betr?gt. Solange das andere Argument (50Ch) der kleinste der beiden Werte ist, ist dies der Wert, auf den min () sich l?sen wird.

 Min (93,75 VW, 50Ch);

Als n?chstes kommt Clamp (), das in der folgenden Reihenfolge drei Argumente akzeptiert: die minimalen, bevorzugten und maximalen Werte. So setzen wir die Linienl?nge.

Zum Minimum stecken Sie Ihre min () -Funktion an, wodurch die 50 -k?pfige Leitungsl?nge jedoch nur bedingt eingestellt ist. Zum Maximum schlage ich 75Ch vor, wie bereits erw?hnt. Der bevorzugte Wert liegt ganz bei Ihnen - dies ist die Breite Ihres Beh?lters, wenn Sie nicht auf das Minimum oder das Maximum treffen.

 Breite: Clamp (min (93,75 VW, 50Ch), 70 VW, 75Ch);

Darüber hinaus k?nnen Sie min (), max () und calc () in einem dieser Argumente verwenden, um weitere Nuancen hinzuzufügen.

Wenn sich der Beh?lter zu eng anfühlt, ist die Schriftgr??e m?glicherweise zu gro?. Wenn es sich zu breit anfühlt, ist die Schriftgr??e m?glicherweise zu klein.

Text in den Container einfügen (mit JavaScript)

Sie wissen, dass der Entwurfstrend, bei dem Text so hergestellt wird, dass sie die Breite eines Containers passen? In der Regel so viel von dem verfügbaren Raum wie m?glich nutzen? Sie werden oft sehen, dass es auf überschriften auf Marketingseiten und Blog -Posts angewendet wird. Nun, Chris schrieb bereits 2018 darüber und rundete verschiedene M?glichkeiten zusammen, um den Effekt mit JavaScript oder JQuery zu erzielen, leider mit Einschr?nkungen. Das Ende zeigt jedoch, dass Sie nur SVG verwenden k?nnen, solange Sie die Viewbox -Werte kennen, und ich habe tats?chlich einen Trick, um sie zu bekommen.

Obwohl es immer noch 3-5 Zeilen JavaScript erfordert, ist es die kürzeste Methode, die ich gefunden habe. Es gleitet auch perfekt in HTML und CSS, insbesondere da das SVG viele CSS -Eigenschaften erbt (einschlie?lich der Farbe, dank Füllung: CurrentColor):

<h1>
  <svg>
    <text>Text an den Container anpassen</text>
  </svg>
</h1>

H1.Container {
  / * Beh?ltergr??e *//
  Breite: 100%;

  /* Typstile (<text> wird die meisten von ihnen erben) */
  Schriftart: 900 1EM System-UI;
  Farbe: HSL (43 74% 3%);

  Text {
    /*
      Wir müssen Füllung verwenden: anstelle von Farbe: Hier
      Wir k?nnen jedoch CurrentColor verwenden, um die Farbe zu erben
    */
    FILL: CurrentColor;
  }
}</text>

 / * W?hlen Sie alle SVGs */
const Svg = document.querySelectorAll ("Svg");

/ * Schleife alle SVGs */
svg.foreach (element => {
  /* Begrenzungskasten von<text> Element */
  const bbox = element.querySelector ("text"). getbbox ();
  / * Begrenzungsbox -Werte an SVG -Element als ViewBox */anwenden
  element.setAttribute ("viewbox", [bbox.x, bbox.y, bbox.width, bbox.height] .join (""));
});</text>

Text in Container (reines CSS) anpassen

Wenn Sie eine Pure-CSS-Methode haben, haben Sie Glück. Trotz der verrückten Dinge, die wir heutzutage mit CSS machen k?nnen, ist Roman Komarovs Anpassungs-Breith-Hack etwas kompliziert (wenn auch ziemlich beeindruckend). Hier ist der Kern davon:

• Der Text wird ein paar Mal dupliziert (obwohl sie mit aria versteckter und buchst?blich mit Sichtbarkeit versteckt versteckt ist: versteckt), damit wir mit den versteckten Mathe machen und das Ergebnis dann auf das sichtbare anwenden k?nnen.
• Unter Verwendung von Container-Abfragen/Container-Abfrageneinheiten umfasst die Mathematik die Inline-Gr??e des Textes durch die Inline-Gr??e des Containers, um einen Skalierungsfaktor zu erhalten, den wir dann für die Schriftgr??e des sichtbaren Textes verwenden, um zu wachsen oder zu schrumpfen.
• Um den Skalierungsfaktor uneinheitlich zu gestalten, verwenden wir den Typ-Casting-Trick (Tan (atan2 ()).
• Bestimmte benutzerdefinierte Eigenschaften müssen mit der @Property AT-Rule registriert werden (ansonsten funktionieren sie nicht wie beabsichtigt).
• Mit dem endgültigen Wert der Schriftgr??e wird Clamp () verwendet, um minimale und maximale Schriftgr??en festzulegen, diese sind jedoch optional.

<span>
  <span>
    <span>
      <span><span>Fit-to-Width-Text</span></span>
      <span aria-hidden="true">Fit-to-Width-Text</span>
    </span>
  </span>
  <span aria-hidden="true">Fit-to-Width-Text</span>
</span>

.Text-fit {
  Anzeige: Flex;
  Container-Typ: Inline-Gr??e;

  -L?nge der Karteiung: Initial;
  -Support-Sentinel: var (-L?nge erfasst, 9999px);

  &> [aria-versteckt] {
    Sichtbarkeit: versteckt;
  }

  &>: Nicht ([Aria-Hidden]) {
    Flex-Grow: 1;
    Container-Typ: Inline-Gr??e;

    -L?nge der Karteiung: 100cqi;
    -verfügbarer Raum: var (-L?nge erfasst);

    &> * {
      -Support-Sentinel: Erbe;
      -L?nge der Karteiung: 100cqi;
      -RATIO: TAN (
        atan2 (
          var (-verfügbarer Raum),
          var (-verfügbarer Raum)-var (-L?nge erfasst)
        )
      );
      -FONT-Gr??e: Klemme (
        1em,
        1em * var (-Verh?ltnis),
        var (-Max-Font-Gr??e, Infinity * 1px)-var (-Support-Sentinel)
      );
      Inline-Gr??e: var (-verfügbarer Raum);

      &: nicht (.Text-fit) {
        Anzeige: Block;
        Schriftgr??e: var (-Schriftgr??e);

        @Container (Inline-Gr??e> 0) {
          wei?er Raum: Nowrap;
        }
      }

      / * Für variable Schriftarten erforderlich, die optische Gr??e verwenden */
      & .Text-fit {
        -Captured-Length2: var (-Schriftgr??e);
        Schriften-Variations-Feststellung: "Opsz" Tan (atan2 (var (-erfasst Length2), 1px));
      }
    }
  }
}

@property-Captured-Length {
  Syntax: "<length> ";
  Anfangswerte: 0px;
  Erben: wahr;
}

@Property-Captured-Length2 {
  Syntax: "<length> ";
  Anfangswerte: 0px;
  Erben: wahr;
}</length></length>

Achten Sie auf neue Eigenschaften von Textwachstum/Text-Shrink-Eigenschaften

Um an einem Container in nur einer CSS -Zeile m?glich zu sein, wurden eine Reihe von L?sungen diskutiert. Die bevorzugte L?sung scheint zwei neue SMS- und Text-Shrink-Eigenschaften zu sein. Pers?nlich glaube ich nicht, dass wir zwei verschiedene Eigenschaften brauchen. Tats?chlich bevorzuge ich die einfachere Alternative, Schriftgr??e: Fit-Width, aber da Textwachstum und Text-Shrink bereits auf der Tabelle sind (Chrome beabsichtigt, Prototypen zu prototypisieren und Sie k?nnen sie verfolgen), werfen wir einen Blick darauf, wie sie funktionieren k?nnten.

Das erste, was Sie wissen müssen, ist, dass, wie vorgeschlagen, die Eigenschaften des Textwachstums und der Textausschnitte für mehrere Zeilen des verpackten Textes in einem Container gelten k?nnen, und das ist riesig, weil wir dies mit meiner JavaScript-Technik oder Roman's CSS-Technik nicht tun k?nnen (wobei jede Zeile einen eigenen Container haben muss).

Beide haben die gleiche Syntax und Sie müssen beide verwenden, wenn Sie sowohl wachsen als auch schrumpfen m?chten:

 Textwachstum:<fit-target><fit-method> ?<length> ?;
Textverlust:<fit-target><fit-method> ?<length> ?;</length></fit-method></fit-target></length></fit-method></fit-target>

• • Perline: Für Textwachstum w?chst Textzeilen, die kürzer als der Container wachsen, zu ihm. Für Textversuche schrumpfen Textzeilen l?nger als der Beh?lter, um dazu zu passen.
  • Konsistent: Für Textanbau wird die kürzeste Linie zum Container angewachsen, w?hrend alle anderen Linien durch denselben Skalierungsfaktor wachsen. Für die Textversuche schrumpft die l?ngste Linie so, dass sie in den Beh?lter passt, w?hrend alle anderen Linien durch denselben Skalierungsfaktor schrumpfen.
• (optional)
  • Skalierung: Skalieren Sie die Glyphen, anstatt die Schriftgr??e zu ?ndern.
  • Skaleninterline: Skalieren Sie die Glyphen, anstatt die Schriftgr??e zu ?ndern, jedoch nur horizontal.
  • Schriftgr??e: Die Schriftgr??e wachsen oder schrumpfen entsprechend. (Ich wei? nicht, wie der Standardwert sein würde, aber ich kann mir vorstellen, dass dies sein würde.)
  • Buchstabenabstand: Der Buchstabenabstand w?chst/schrumpft anstelle der Schriftgr??e.
• (Optional): Die maximale Schriftgr??e für Textwachstum oder minimale Schriftgr??e für Textversuche.

Ich denke, ich bevorzuge den Ansatz der Schriftgr??e: Fit-Width, da dies w?chst und alle Linien schrumpfen würde, um den Beh?lter in nur eine CSS-Linie anzupassen. Der obige Vorschlag macht viel mehr als ich m?chte, und es gibt bereits eine Reihe von Stra?ensperren zu überwinden (von denen viele zug?nglich sind). Das bin aber nur ich, und ich w?re neugierig, deine Gedanken in den Kommentaren zu kennen.

Abschluss

Es ist einfacher, die Linienl?nge mit CSS jetzt zu setzen als vor einigen Jahren. Jetzt haben wir Charaktereinheiten, Clamp () und min () (und max () und calc (), wenn Sie diese auch hineinwerfen wollten) und verrückte Dinge, die wir mit SVGs und CSS machen k?nnen, um Text in einen Beh?lter anzupassen. Es sieht aus wie Textwachstum und Textverriegelung (oder eine ?quivalente L?sung) sind jedoch das, was wir wirklich brauchen, zumindest in einigen Szenarien.

Bis wir dort ankommen, ist dies ein guter Zeitpunkt zum Wiegen.

Das obige ist der detaillierte Inhalt vonEinstellungsl?nge in CSS einstellen (und Text an einen Container anpassen). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!