Detaillierte Erläuterung der Lösung, um den Inhalt im Container im Flex-Layout zu halten

Auf der mobilen Seite ist das Flex-Layout sehr nützlich. Es kann die Breite des Containers automatisch an die Breite des Geräts anpassen. Es ist sehr bequem zu verwenden und wird zunehmend unverzichtbar. Allerdings habe ich kürzlich bei der Arbeit an einem Projekt ein Problem festgestellt.

Das heißt, wenn in einem Container mit festgelegtem Flex:1 der Text sehr lang ist, wird er den Container überschreiten, anstatt im festgelegten dynamischen verbleibenden Platz zu bleiben. Da das eigentliche Projekt recht kompliziert ist, lässt es sich nur schwer erklären. Deshalb vereinfachen wir das Problem hier wie folgt:

Grundsätzlich gibt es einen Hauptcontainer mit flexiblem Layout, ein Logo mit fester Breite und Höhe auf der linken Seite und Inhalt mit dynamischer Breite auf der rechten Seite.

<div Klasse="Haupt">
    <img alt="" class="logo" src="bild.jpg">
    <div Klasse="Inhalt">
        <h4 class="name">ein Name</h4>
        <p class="info">eine Info</p>
        <p class="notice">Dies ist ein Hinweisinhalt.</p>
    </div>
</div>

.hauptsächlich {
    Anzeige: Flex;
}
.logo {
    Breite: 100px;
    Höhe: 100px;
    Rand: 10px;
}
.Inhalt {
    biegen: 1;
}
.Inhalt > * {
    Leerzeichen: Nowrap;
    Überlauf: versteckt;
    Textüberlauf: Auslassungspunkte;
}

.notice kann sehr lang sein und muss auf manchen Geräten ausgeblendet werden, d. h. es wird nicht umbrochen und hinterlässt als Markierung Auslassungspunkte....

Hier werden Sie feststellen, dass die Auslassungspunkte des Textüberlaufs nicht wirksam sind und überhaupt nicht angezeigt werden. Und da Nowrap eingestellt ist, werden Sie feststellen, dass der Text den Inhalt erweitert, sodass der Inhalt über den Bildschirm hinausgeht. Dieses Problem muss also gelöst werden.

Habe versucht, Flex:1 des übergeordneten Elements .content abzubrechen, aber es hat nicht funktioniert.
Versuchen Sie, die Anzeige „display: flex“ des .main-Containers abzubrechen, und die Auslassungspunkte werden angezeigt.

Daher wird vermutet, dass es sich um ein Problem mit dem Flex-Layout handelt, und weiter, dass die Auslassungspunkte die Breite des übergeordneten Elements begrenzen müssen.

Der Versuch, die Breite auf 100 % für das übergeordnete Element „.content“ einzustellen, funktioniert nicht, die Einstellung der Breite auf 0 funktioniert jedoch. Im Augenblick:

.Inhalt {
    biegen: 1;
    Breite: 0;
}

Wenn die Breite nicht festgelegt ist, kann .content durch untergeordnete Knoten unendlich erweitert werden. Daher ist .notice immer breit genug, um den gesamten Text in einer Zeile anzuzeigen, und der Kürzungseffekt kann nicht ausgelöst werden. Es gibt noch eine andere Möglichkeit, die Wirkung zu testen:

.Inhalt {
    biegen: 1;
    Überlauf: versteckt;
}

Die beiden oben genannten Methoden können den gewünschten Effekt erzielen, d. h. wenn der Inhalt auf Flex 1 eingestellt ist, erhält er dynamisch die verbleibende Breite des übergeordneten Containers und wird nicht durch seine eigenen untergeordneten Elemente gestreckt.

Nach dem Testen sind die folgenden Methoden ungültig:

Das Festlegen der maximalen Breite für HTML- und Body-Elemente scheint die Seitenbreite zu erzwingen.
Legen Sie einen Überlauf für den Hauptteil fest. Die Seitenbreite kann nicht erweitert werden, die Elementbreite bleibt jedoch erhalten, d. h. das Element selbst läuft weiterhin über.
Legen Sie die maximale Breite und den Überlauf für HTML und Text gleichzeitig fest. Die Seitenbreite ist auf die maximale Breite beschränkt, aber das Element selbst läuft trotzdem über.
Setzen Sie overflow: hidden auf den .main-Container. Ebenso läuft .main nicht über, aber .notice selbst läuft immer noch über.
Festlegen der Breite oder maximalen Breite für das Element .notice: Obwohl die Breite begrenzt ist, werden die Auslassungspunkte … bei einer bestimmten Breite nicht vollständig angezeigt, manchmal werden nur zwei Punkte angezeigt.

Damit ist dieser Artikel darüber, wie Sie Inhalte im Container im Flex-Layout behalten, abgeschlossen. Weitere Informationen dazu, wie Sie Inhalte im Container im Flex-Layout behalten, finden Sie in den vorherigen Artikeln von 123WORDPRESS.COM oder in den verwandten Artikeln weiter unten. Wir hoffen, dass Sie 123WORDPRESS.COM auch in Zukunft unterstützen werden!