Heim > Web-Frontend > CSS-Tutorial > Hauptteil

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

零下一度
Freigeben: 2017-05-03 15:48:45
Original
2906 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

:

1

, Clip , Cut, Intercept

            2

, Auslassungspunkte, verwenden Sie ... (Auslassungspunkte), um den nicht angezeigten Inhalt darzustellen

Zum Beispiel:

  1. <!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

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

2

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

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
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
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!