Lösung für das Textüberlaufproblem auf CSS-Flex-Basis

Die unbedeutende flex-basis hat bei der kleinen Funktion zum Hinzufügen von Auslassungspunkten zu Textüberläufen eine Menge Probleme verursacht. Lassen Sie mich dies im Folgenden demonstrieren.

1. Flex-Familie

Es gibt viele Eigenschaften in Flex. Die von uns am häufigsten verwendeten sind die folgenden:

.container {
  Anzeige: Flex;
}

.container > .links {
  biegen: 1;
}

.container > .rechts {
  biegen: 1;
}

So lässt sich leicht eine links- und rechtsgleiche Aufteilung des Layouts erreichen.

Schauen wir uns ein Beispiel an, das das Problem verursacht:

<!DOCTYPE html>
<html lang="de">
  <Kopf>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=Gerätebreite, Anfangsmaßstab=1.0" />
    <meta http-equiv="X-UA-kompatibel" content="ie=edge" />
    <title>Dokument</title>
    <Stil>
      div {
        Polsterung: 5px;
        Rand: 1px durchgezogen #ccc;
      }

      .kein-Effekt {
        Elemente ausrichten: zentrieren;
        Rand: 100px;
        Breite: 200px;
        Farbe: #999;
      }

      .kein-Effekt > div:erster-vom-Typ {
        Rand rechts: 10px;
      }

      P {
        Farbe: rot;
      }

      .kein-Wrap {
        Überlauf: versteckt;
        Leerzeichen: Nowrap;
        Textüberlauf: Auslassungspunkte;
      }
    </Stil>
  </Kopf>
  <Text>
    <div Stil="Anzeige: flex;" Klasse="kein Effekt">
      <div style="flex: 0 0 80px">Ich bin kleiner</div>
      <div style="flex: auto">
        <p class="no-wrap">Ich bin sehr lang, kein Scherz, ich kann unendlich wachsen</p>
      </div>
    </div>
  </body>
</html>

Der gewünschte Effekt:

Aber die tatsächliche Wirkung:

Warum passiert das?

2. Flex-Basis steht im Weg

flex: auto ist eigentlich eine Sammlung von drei Eigenschaften:

Flex-Wachstum: 1;
Flex-Schrumpf: 1;
Flex-Basis: Auto;

flex-grow gibt das Vergrößerungsverhältnis an, flex-shrink das Verkleinerungsverhältnis und flex-basis den vom Element belegten Hauptachsenraum vor der Zuweisung von überschüssigem Raum.

Unser linkes Div wird nicht erweitert oder verkleinert und seine Breite ist auf 80px festgelegt; das rechte Div füllt automatisch die verbleibende Breite, die 200px - 80px = 120px beträgt, aber der tatsächliche Effekt liegt weit über 120px. Dies liegt an der Berechnung, wenn Flex-Basis automatisch ist.

Schauen wir uns die Geschichte von flex-basis: auto an:

Ursprünglich wurde die Flex-Basis durch Breite/Höhe bestimmt;
Später gab es einen Fehler 1032922 und die Berechnung der Flex-Basis wurde durch die Breite entlang der Hauptachse bestimmt;
Später trat ein Fehler 1093316 auf und die Breite/Höhe wurde wieder auf eine bestimmte Einstellung geändert und ein neues content erschien, um die Breite/Höhe automatisch zu berechnen.

Wenn wir also width für flex-basis -Element nicht festlegen, wird die Breite von flex-basis: auto durch den internen content bestimmt und durch die max/min-width begrenzt.

Auf diese Weise hängt die Breite flex-basis Elements bei freiem internen content von max/min-width ab.

Der Standardwert für max-width ist none , und der Standardwert für min-width ist im Allgemeinen 0 , hier ist er jedoch auto , was der Grund für die „Anomalie“ ist.

flex-basis -Element:

Gemeinsame Elemente:

3. Lösung

Sobald wir die Ursache kennen, können wir das richtige Heilmittel verschreiben.

Zunächst können Sie natürlich width -Attribut festlegen. Solange width kleiner als der verbleibende Platz ist, wird es normalerweise auf width: 0; so können Sie 100% sicher sein, dass es kleiner als der verbleibende Platz ist;
Dasselbe gilt, wenn wir width nicht festlegen, sondern sie durch min-width begrenzen. Da das Flex-Element min-width:auto hat, legen wir auch einen Wert fest, der kleiner ist als der verbleibende Platz, normalerweise min-width: 0;
Die Einstellung overflow:hidden zur Begrenzung des Überlaufeffekts ist ebenfalls konsistent.

Nachdem wir nun drei Lösungen vorgestellt haben, wollen wir darüber sprechen, warum die ersten beiden gelöst werden können.

Die erste ist sehr einfach. Die Breite ist auf 0 gesetzt, aber flex-basis sorgt dafür, dass das Element den verbleibenden Platz ausfüllt, sodass es gefüllt wird. Da das P-Element eine Ellipse hat, die nicht umbrochen wird, wird es normal angezeigt.

Und was ist mit dem Zweiten?

Der zweite Fall ist komplizierter. Wenn wir min-width auf einen anderen Wert als „auto“ setzen, wird der Shrink-to-fit-Algorithmus verwendet. Der Berechnungsmechanismus dieses Algorithmus ist wie folgt:

min(max(bevorzugte Mindestbreite, verfügbare Breite), bevorzugte Breite)

Übersetzt in die Sprache der Erwachsenen:

Bevorzugte Mindestbreite: Mindestbreite
Verfügbare Breite: Verfügbare Breite, d. h. die Breite des Inhaltsfelds
Bevorzugte Breite: Die bevorzugte Breite, die Breite, bei der keine Zeilenumbrüche erforderlich sind, außer bei expliziten Zeilenumbrüchen

Passende Schrumpfbreite = min. (max. (Mindestbreite, verfügbare Breite), gewünschte Breite)

Berechnen wir also:

Mindestbreite: 0
Verfügbare Breite: 272px
Bevorzugte Breite: 200 - ein beliebiger Wert für den Rest (98px)

Durch Berechnung erhalten wir:

max(0, 272) = 272

min(272, 98) = 98

Die endgültige Breite beträgt also die verbleibenden 98 Pixel. Wenn wir min-width: 110px manuell einstellen, sehen wir, dass es den Überlauf überschreitet.

Zusammenfassen

CSS ist nicht so einfach zu verwenden, wie wir denken. Es gibt Regeln, die befolgt werden müssen, aber der Prozess, sie herauszufinden, ist etwas kompliziert ... Wenn Sie auf etwas stoßen, das Sie nicht verstehen, können Sie mehr darüber lesen, wie es entstanden ist und was es bewirkt, und Sie werden die Idee hinter der Lösung verstehen.

<<: Konfigurieren Sie nginx so, dass es zur Systemwartungsseite umleitet

>>: JavaScript-Grundlagen dieser Verweisung

Detaillierte Erläuterung der vier Transaktionsisolationsebenen in MySQL

Aktivieren Sie OCSP, um die Effizienz der https-Zertifikatsüberprüfung zu verbessern und das Problem des langsamen Zugriffs auf Let’s Encrypt SSL-Zertifikate zu lösen

Artikel

So verwenden Sie die Baidu Map API im Vue-Projekt

Artikel

Lösung für das Textüberlaufproblem auf CSS-Flex-Basis

Detaillierte Erläuterung der vier Transaktionsisolationsebenen in MySQL

Legen Sie den Standardtext des Suchfelds fest. Der Standardtext verschwindet, wenn mit der Maus geklickt wird.

Was soll ich tun, wenn ich die Quelldatei einer Webseite nicht anzeigen kann?

Einführung in die grundlegenden Konzepte und Technologien der Webentwicklung

Verwenden Sie reines CSS, um das A-Tag in HTML ohne JavaScript zu deaktivieren

So stellen Sie Gitlab schnell mit Docker bereit

Detaillierte Erklärung der Lösung für den 404-Fehler von Tomcat

Implementierung von vite+vue3.0+ts+element-plus zum schnellen Erstellen eines Projekts

Aktivieren Sie OCSP, um die Effizienz der https-Zertifikatsüberprüfung zu verbessern und das Problem des langsamen Zugriffs auf Let’s Encrypt SSL-Zertifikate zu lösen

So verwenden Sie die Baidu Map API im Vue-Projekt

Artikel empfehlen

Detaillierte Erläuterung der MySQL-Deadlock-Prüfung und Beispiele zur Deadlock-Entfernung

Detaillierte Erklärung der Interaktion zwischen React Native und IOS

Einführung in die MySQL-Ansicht und Tutorial zur grundlegenden Bedienung

Mit JS in zehn Minuten die Existenz von Elementen in einem Array bestimmen

So scrollen Sie manuell durch Protokolle im Linux-System

Der Unterschied zwischen Schaltfläche und Eingabetyp = Schaltfläche und Vorsichtsmaßnahmen

MySQL-Einschränkungstypen und Beispiele

Zusammenfassung der Linux-Befehlsmethoden zum Anzeigen verwendeter Befehle

Tutorial zum Erstellen eines Zookeeper-Servers unter Windows

Lösung für MySQL, das aufgrund einer übermäßigen Speicherkonfiguration nicht gestartet werden kann

Detaillierte Erläuterung der Vue-Projektverpackung

Verwenden von Keras zur Beurteilung von SQL-Injection-Angriffen (Beispielerklärung)

JS implementiert das Schlangenspiel

Detaillierte Schritte zur Installation von Anaconda unter Linux (Ubuntu 18.04)

Beispielcode zur Implementierung einer Upload-Komponente mit Vue3