div css nowrap ohne Zeilenumbrüche_Erfahrungsaustausch

Zum Beispiel gibt es 4 Lis in einer UL mit einer Breite von 210 Pixeln. Die Breiten dieser 4 Lis betragen 80 Pixel, 120 Pixel, 140 Pixel und 80 Pixel entsprechend ihrer eigenen Inhaltslänge.
Der Effekt, den ich brauche, ist, dass die vier Li automatisch nach links angeordnet werden. Wenn die Summe der Längen des dritten Li und der ersten beiden Li größer als die Breite von ul ist, bewegt sich das dritte Li eine Zeile nach unten. Wird in der zweiten Zeile angezeigt. Anstatt ul breiter oder höher zu machen (der Inhalt wird umbrochen und die Höhe erhöht), hat
die Breite von ul auf 210 Pixel und die Breite von li automatisch definiert und festgestellt, dass das Ergebnis ist:
ul ist nicht gestreckt . Schade, dass li nicht automatisch in der gleichen Reihenfolge wie das nächste angeordnet ist. Stattdessen wird der Inhalt umbrochen und der Wert li wird erhöht. Dann schamlos in die erste Reihe gequetscht. .
Nach sorgfältiger Überlegung denke ich, dass das Problem im Zeilenumbruch des internen Inhalts von li liegt. Also habe ich nach dem CSS-Attribut gesucht, das Zeilenumbrüche verbietet.
Ich habe online nachgeschaut und konnte es nicht finden. Ich habe Nagamu Riyue in der Gruppe gefragt und das Worttrennungsattribut erhalten. Alles behalten; keine Zeilenumbrüche. .
Nachdem ich es zu li hinzugefügt hatte, war ich überrascht, dass das Problem gelöst wurde.
Als ich die Seite für die Arbeitsgruppe debuggte, wies jemand darauf hin, dass es ein Anzeigeproblem gab.
Ich ging hinüber und warf einen Blick darauf, und die Anzeige änderte sich nicht. Ich dachte nur, es könnte ein Problem mit der Browserversion sein.
Ich verwende IE7 und FF und sie verwenden IE6. Ich habe in DW nachgesehen und festgestellt, dass das Wortumbruch-Attribut tatsächlich von IE6 nicht unterstützt wird:
CSS-Attribut Wortumbruch wird nicht unterstützt Microsoft Internet Explorer 5.0, Microsoft Internet Explorer 5.5, Microsoft Internet Explorer 6.0, Netscape Navigator 6.0, Netscape Navigator 7.0

Es ist wirklich frustrierend. Dieses Problem hat mich schon einmal gestört. Es wurde nie gelöst.
Dieser Freund hat gute Methoden, bitte geben Sie mir einen Rat! Vielen Dank.


Das Problem wurde gelöst. Es ist lustig, das zu sagen. Geben Sie den Code manuell in DW ein.
Ich habe Nowrap in einem Attribut gefunden. Ist das nicht Nowrap von Word-Braek? Kann es Zeilenumbrüche verhindern?
Mit der Mentalität, es auszuprobieren, habe ich es komplett eingegeben
white-space: nowrap;
Im DW-Test gibt es keine unterstrichene gepunktete Linie, was bedeutet, dass es kein Problem mit der Browserunterstützung gibt.
Speichern Sie F12. Problem gelöst. hehe. . .


Notieren Sie sich übrigens die Syntax:

Syntax:
white-space : normal |.
Wert:
normal : Standardwert . Standardverarbeitungsmethode. Text verarbeitet automatisch Zeilenumbrüche. Wenn die Containergrenze erreicht ist, wird der Inhalt in die nächste Zeile verschoben.
pre: Zeilenumbrüche und andere Leerzeichen werden geschützt. Dieser Wert erfordert die Deklaration von IE6+ oder !DOCTYPE als standardkonforme Modusunterstützung. Wenn die !DOCTYPE-Deklaration keinen standardkonformen Modus angibt, kann dieses Attribut verwendet werden, hat jedoch keine Auswirkung. Das Ergebnis entspricht normal. Siehe pre-Objekt
nowrap: Erzwingt die Anzeige des gesamten Textes in derselben Zeile, bis das Ende des Textes erreicht ist oder ein br-Objekt gefunden wird. Siehe noWrap-Attribut

Beschreibung:
Legt die Verarbeitungsmethode von Leerzeichen innerhalb des Objekts fest oder ruft sie ab.
Leerzeichen wie Zeilenumbrüche, Leerzeichen und TAB werden in HTML-Dokumenten standardmäßig ignoriert. Wenn diese Eigenschaft auf normal oder nowrap gesetzt ist, können Sie benannte Entitäten ohne Zeilenumbrüche zum Hinzufügen von Leerzeichen und br-Elemente zum Hinzufügen von Zeilenumbrüchen verwenden. Diese Eigenschaft hat auf Inhalte, die Sie mit dem Document Object Model (DOM) manipulieren, die gleiche Wirkung wie auf Inhalte, die vom IE angezeigt werden.
Diese Eigenschaft funktioniert bei Blockobjekten.
Diese Eigenschaft ist für das currentStyle-Objekt schreibgeschützt. Es ist für andere Objekte lesbar und beschreibbar.
Die entsprechende Skriptfunktion ist whiteSpace .
von:woria.cn