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

Sprechen Sie über implizite Konvertierung in MySQL

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

Sprechen Sie über implizite Konvertierung in MySQL

Vue realisiert den gesamten Prozess der Slider-Drag-Verifizierungsfunktion

Beispielanalyse für die Farbabstimmung einer Webseite: Analyse der Webseite mit grüner Farbabstimmung

Detaillierte Erläuterung der elastischen CSS3-Erweiterungsbox

Installationsschritte für das grafische MySQL-Verwaltungstool Navicat

Der Effekt eines dynamischen CSS-Farbverlaufsrahmens, der um den Inhaltsbereich rotiert (Beispielcode)

Ubuntu 20.04-Desktopinstallation und Aktivierung der Root-Berechtigung sowie Details zur SSH-Installation

So implementieren Sie vertikale Textausrichtung mit CSS (Zusammenfassung)

JS-Implementierung des Karussell-Karussell-Falls

Installation von Docker CE auf Ubuntu

Artikel empfehlen

Analysieren Sie, wie Sie automatisch Vue-Komponentendokumentation generieren

Verwendung des Linux-Befehls usermod

Verwenden Sie Angular CDK, um eine Service-Popup-Toast-Komponentenfunktion zu implementieren

Welche Schleife ist in JavaScript die schnellste?

Tutorial zur Installation und Browserverwendung des leichten Objektspeicherdienstes Minio

Vue + Element + OSS realisiert das Hochladen von Front-End-Fragmenten und die Wiederaufnahme von Haltepunkten

Anweisungen zur Verwendung des Meta-Viewport-Tags (Zoom-Steuerung beim mobilen Surfen)

So überprüfen Sie die Version des Kali Linux-Systems

Detaillierte Erklärung zur Verwendung von JavaScript-Funktionen

Detaillierte Erläuterung der Verwendung von Gulp.js, einem leistungsstarken Tool für die Front-End-Aufgabenerstellung

Untersuchung der Wirkung der durch JS realisierten Seitenseitenleiste

Detaillierte Erläuterung der Reihenfolge der MySQL-Abfrageergebnisse gemäß der Reihenfolge der ID in in ()

VPS erstellt Offline-Download-Server (nach der Ära der Netzwerkfestplatten)

Detaillierte Erklärung der Definition und Funktion von Trennzeichen in MySQL

Win10+Ubuntu 20.04 LTS Dualsysteminstallation (UEFI + GPT) (Bilder und Text, Warnung vor mehreren Bildern)