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 mehrerer Lösungen für JavaScript-Unterbrechungsanforderungen

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

Detaillierte Erläuterung mehrerer Lösungen für JavaScript-Unterbrechungsanforderungen

Vue.js verwaltet die Kapselung von Hintergrundtabellenkomponenten

Lösen Sie das Problem der Kombination von AND und OR in MySQL

So implementieren Sie die zentrierte Ausrichtung einer CSS-Maske im Vollbildmodus

Vue3 realisiert den Bildlupeneffekt

Lösung für das Problem, dass Centos8 Docker nicht installieren kann

HTML 5 Stylesheet zurücksetzen

Implementierung des Übergangseffekts für konkave Rechtecke mit linearem Farbverlauf in CSS

So legen Sie eine statische IP für den Ubuntu 18.04-Server fest

So realisieren Sie die vertikale Anordnung von Text mit CSS3

Artikel empfehlen

Detaillierte Erläuterung geplanter Aufgaben und verzögerter Aufgaben unter Linux

Einführung in berechnete Eigenschaften in Vue

JavaScript-Verlaufsobjekt erklärt

Mein CSS-Framework – base.css (Browser-Standardstil zurücksetzen)

So passen Sie die Textgröße im Webdesign an: Kleiner Text, großes Erlebnis

Detaillierte Erklärung zur Verwendung von $emit in Vue.js

So erkennen Sie die Ubuntu-Version mithilfe der Befehlszeile

Detaillierte Erläuterung der Installations- und Bereitstellungspraktiken von Zabbix

Beispielskript für inkrementelle MySQL-Sicherungs- und Breakpoint-Wiederherstellung

Lösung für Vues Unfähigkeit, Array-Änderungen zu beobachten

Verwendung des Fokus-innerhalb-Selektors von CSS3

js realisiert bidirektionale Datenbindung (Accessor-Überwachung)

Probleme und Lösungen bei der Nutzung der MySQL-Datenbanküberwachungssoftware Lepus

Detaillierte Erläuterung der Sicherung und Wiederherstellung von PSSQL-Datenbanken in Docker

Detaillierte Erläuterung der Umleitungskonfiguration und -praxis von Rewrite in Nginx