Wie man mit CSS-Überlauf und Zeilenumbrüchen umgeht-CSS-Tutorial-php.cn

Wie man mit CSS-Überlauf und Zeilenumbrüchen umgeht

零下一度

Freigeben： 2017-05-03 15:48:45

Original

2900 Leute haben es durchsucht

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>

Nach dem Login kopieren

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!