Heim > Artikel > Web-Frontend > Wie man mit CSS-Überlauf und Zeilenumbrüchen umgeht
Wie man mit CSS-Überlauf und Zeilenumbrüchen umgeht
- 零下一度Original
- 2017-05-03 15:48:452916Durchsuche
1. Überlaufverarbeitung
1, Verarbeitung von Leerzeichen
Wenn der Text zu lang ist und nicht im Container angezeigt werden kann, ob um die Zeile umzubrechen
Attribute: white-space: normal / nowrap
normal: Browser-Standardeinstellungen verwenden
nowrap : Keine Zeilenumbrüche
2, Textüberlauf
Wie man mit Überlauf umgeht,Wenn Sie möchten Um den Überlaufinhalt auszublenden, sollten Sie die Verwendung dieses Attributs in Betracht ziehen.
Hinweis: Dieses Attribut muss in Verbindung mit overflow:hidden
Attribut : text-overflow
Werte:
1, Clip , Cut, Intercept
2, Auslassungspunkte, verwenden Sie ... (Auslassungspunkte), um den nicht angezeigten Inhalt darzustellen
Zum Beispiel:<!DOCTYPE html > <head> <title>文本格式</title> <meta charset="utf-8" /> <style> p{ width:150px; height:50px; border:1px solid black; overflow:hidden; } #d1{ white-space:normal; text-overflow:ellipsis; } #d2{ white-space:nowrap; text-overflow:clip; } #d3{ white-space:nowrap; text-overflow:ellipsis; } </style> </head> <body> <p id="d1">longlonglonglonglonglonglonglonglonglong无法在框中容纳</p><br/> <p id="d2">longlonglonglonglonglonglonglonglonglong无法在框中容纳</p><br/> <p id="d3">longlonglonglonglonglonglonglonglonglong无法在框中容纳</p> </body> </html>
, Zeilenumbruch
Hinweis: Nur gültig für Englisch 1, langfristige Wörter ändern sich
Zeilenumbruch:Normal:
Standardmäßig die Standardform des Browsers, ohne das Wort zu zerstören Struktur Break-Wort:
Die Struktur der Zerstörung der Wörter2
, TextänderungWort- break:
nimm den Wert:
normal：
break-all:
bricht die Wortstruktur und unterbricht die Zeilek eep-all:
unter Leerzeichen im Zustand halber Breite Zeilenumbrüche durchführenDas obige ist der detaillierte Inhalt vonWie man mit CSS-Überlauf und Zeilenumbrüchen umgeht. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!