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:452906Durchsuche

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

, Clip , Cut, Intercept

, 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>

zwei

, Zeilenumbruch

Hinweis: Nur gültig für Englisch

, 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örter

, Textänderung

Wort- break:

nimm den Wert:

normal：

break-all:

bricht die Wortstruktur und unterbricht die Zeile

k eep-all:

unter Leerzeichen im Zustand halber Breite Zeilenumbrüche durchführen

Das 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!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Teilen Sie einen CSS-Spezialeffektcode, der die gesamte Website grau machtNächster Artikel：Teilen Sie einen CSS-Spezialeffektcode, der die gesamte Website grau macht

In Verbindung stehende Artikel

Mehr sehen