Lösen Sie das Problem, dass Zahlen und Buchstaben den Behälter vergrößern

Problem mit dem automatischen Zeilenumbruch: Der Zeilenumbruch normaler Zeichen ist sinnvoller, aber fortlaufende Zahlen und englische Zeichen erweitern häufig den Container, was ziemliche Kopfschmerzen bereitet. Im Folgenden erfahren Sie, wie Sie den Zeilenumbruch in CSS implementieren.

Bei Elementen auf Blockebene wie div und p hat der Zeilenumbruch von normalen Textelementen (asiatischer Text und nicht-asiatischer Text) den Standard-Leerraum: normal und wird automatisch nach der definierten Breite umbrochen.
html

CSS
#wrap{white-space:normal; width:200px }

1. (IE-Browser) Verwenden Sie für fortlaufende englische Zeichen und arabische Ziffern den Zeilenumbruch: break-word; oder word-break:break-all;
#wrap{word-break:break-all; width:200px;}
oder
#wrap{word-wrap:break-word; width:200px;}

Wirkung: Zeilenumbrüche können erreicht werden

2. (Firefox-Browser) Die Zeilenumbrüche fortlaufender englischer Zeichen und arabischer Ziffern lösen dieses Problem nicht. Wir können nur die Zeichen ausblenden, die die Grenze überschreiten, oder Bildlaufleisten zum Container hinzufügen.

#wrap{word-break:break-all; width:200px;}

Wirkung: Der Container ist normal und der Inhalt wird für die Tabelle ausgeblendet
(1) (IE-Browser) verwenden Sie table-layout:fixed; erzwingen Sie die Breite der Tabelle und verbergen Sie überschüssigen Inhalt

abcdefghigklmnopqrstuvwxyz1234567890ssssssssssssss

Wirkung: Überflüssige Inhalte ausblenden
(2) (IE-Browser) verwenden Sie table-layout: Fixed; um die Breite der Tabelle zu erzwingen, verwenden Sie word-break: break-all; oder word-wrap: break-word line break;

abcdefghigklmnopqrstuvwxyz 1234567890

abcdefghigklmnopqrstuvwxyz 1234567890

Wirkung: Es können Zeilenumbrüche vorgenommen werden

3. (IE-Browser) Verwenden Sie beim Verschachteln von div, p usw. in td, th die oben erwähnte Zeilenumbruchmethode von div und p.

4. (Firefox-Browser) verwenden Sie table-layout: Fixed; um die Breite der Tabelle zu erzwingen, verwenden Sie word-break: break-all; versteckt; um über den Inhalt hinaus auszublenden, kann overflow:auto; hier nicht funktionieren

abcdefghigklmnopqrstuvwxyz1234567890

abcdefghigklmnopqrstuvwxyz1234567890

Wirkung: Mehr als nur Inhalte verbergen

5. (Firefox-Browser) Verschachteln Sie div, p usw. in td, th usw. Verwenden Sie die oben erwähnte Methode, um mit Firefox umzugehen