So behalten Sie den Inhalt im Container, wenn das Flex-Layout durch untergeordnete Elemente gestreckt wird

Auf Mobilgeräten ist das Flex-Layout sehr nützlich. Es kann die Breite des Containers automatisch an die Breite des Geräts anpassen. Bei der Arbeit an einem Projekt ist mir jedoch kürzlich ein Problem aufgefallen:

Für ein li-Element ist der Flex-Wert festgelegt: flex: 0 0 33,333 %, und der Text im untergeordneten Element soll automatisch weggelassen werden, wenn er die durch flex definierte Breite überschreitet.

<li>
    <a href="">
        <img src="upload/2022/web/5a1692eeN105a64b4.png" alt=""> 
        <p>Xiaomi Xiaomi Xiaomi Xiaomi Xiaomi Xiaomi Xiaomi Xiaomi Xiaomi Xiaomi Xiaomi Xiaomi Xiaomi Xiaomi Xiaomi Xiaomi Xiaomi Xiaomi</p>
    </a>
</li>

ul{
     Anzeige: Flex;
}
li{
    -webkit-box-flex: 0;
    -ms-flex: 0 0 33,333 %;
    Flexion: 0 0 33,333 %;
    Textausrichtung: zentriert;
    Polsterung: 0 1,333vw;
    -webkit-box-sizing: Rahmenbox;
    Box-Größe: Rahmenbox;
    Rand unten: 2,667vw;
}
Lippe{
    Schriftgröße: 3,2vw;
    Farbe: #8F8E94;
    Textüberlauf: Auslassungspunkte;
    Leerzeichen: Nowrap;
}

Zu diesem Zeitpunkt werden Sie feststellen, dass der Text von p möglicherweise sehr lang ist und auf einigen Geräten ausgeblendet werden muss, d. h. er wird nicht umbrochen und hinterlässt Auslassungspunkte ... als Markierung.

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.

Versuchen Sie, Flex: 0 0 33,33 % des übergeordneten Elements .li abzubrechen, aber es funktioniert nicht.

Versuchen Sie, die Anzeige „display: flex“ des UL-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 „li“ einzustellen, funktioniert nicht, aber die Einstellung „breite: 0“ funktioniert. Im Augenblick:

li{
    Flexion: 0 0 33,333 %;
    Breite: 0
}

Wenn die Breite nicht festgelegt ist, kann li durch untergeordnete Knoten unendlich erweitert werden. Daher ist p 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:

li{
    Flexion: 0 0 33,333 %;
    Überlauf: versteckt;
}

Die beiden oben genannten Methoden können den gewünschten Effekt erzielen, d. h. wenn der Flex-Wert für li festgelegt ist, wird dynamisch die verbleibende Breite des übergeordneten Containers abgerufen und nicht durch seine eigenen untergeordneten Elemente gestreckt.

• 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.

Das Obige ist der vollständige Inhalt dieses Artikels. Ich hoffe, er wird für jedermanns Studium hilfreich sein. Ich hoffe auch, dass jeder 123WORDPRESS.COM unterstützen wird.