Wenn eine Linie nicht bricht

Zeilen brechen normalerweise, wenn Text die Kante des übergeordneten Containers erreicht. Dies ist das Standard -Absatzverhalten. Dies stützt sich jedoch auf Räumen oder Whitespace zwischen den Wörtern. CSS bietet mehrere Immobilien, die Linienpausen beeinflussen, aber konzentrieren wir uns auf ein Szenario, in dem erwartete Pausen scheitern.

Was passiert, wenn dem Browser eindeutige Break -Indikatoren fehlen?

Erstellen wir ein Beispiel für "Tagliste" und beheben Sie dann das Leitungsproblem. Hier ist die erste HTML:

• Php
• JavaScript
• Rost

Wir werden horizontal Listenelemente mit CSS anordnen:

 ul {
  Rand: 0;
  Polsterung: 0;
  Listenstil: Keine;
}

li {
  Anzeige: Inline;
  Padding-Right: 5px;
}

Die Liste erscheint wie gewünscht. Lassen Sie uns nun die Liste in ein div mit einer festen Breite einwickeln:

<div class="tags">
  <ul>
    <li>Php</li>
    <li>JavaScript</li>
    <li>Rost</li>
  </ul>
</div>

.Tags {
  Breite: 200px;
}

Hier ist das Problem: Die HTML -Minifikation beseitigt Whitespace, was zu:

<div><ul>
<li> Php</li>
<li> JavaScript</li>
<li> Rost</li>
</ul></div>

Die Linie bricht nicht mehr bei 200px. Warum? Der Browser behandelt die gesamte Liste aufgrund des Fehlens von Trennzeichen als ein einzelnes, ungebrochenes Wort. Polsterung löst dies nicht; Die gesamte Liste bleibt eine einzige Einheit.

Die Zeilenzeile bricht mit Sonderzeichen

Neben Leerzeichen (mit Ausnahme nicht bahnbrechender Räume) lösen mehrere Zeichen die Linienbrüche:

• Bindestrich (-)
• En streift ( -)
• Em Striche ( -)
• Fragemarken (?)
• Räume mit Null (U 200b oder)

Diese Pausen treten während des Renders auf; Der Browser sieht den Text immer noch als einzelne Einheit. Das Hinzufügen eines Listenelements mit einem dieser Charaktere erzwingt eine Pause. Fügen wir "Objective-C" hinzu:

<div>
  <ul>
    <li>Php</li>
    <li>JavaScript</li>
    <li>Rost</li>
    <li>Ziel-C</li>
  </ul>
</div>

Hier sind drei Lösungen:

Lösung 1: Integrieren Sie zeilenaufbrechliche Charaktere

Fügen Sie manuell Leerzeichen oder andere zeilenaufbrechliche Charaktere hinzu. Minifiers können diese jedoch entfernen.

<div>
  <ul>
    <li>Php</li>
    <li>JavaScript</li>
    <li>Rost</li>
    <li>Ziel-C</li>
  </ul>
</div>

Lösung 2: Verwenden Sie Pseudoelemente

Fügen Sie zeilenbrechende Zeichen mit CSS ::before und ::after Pseudoelementen hinzu. Minifiers entfernen diese CSS-AT-Whitespace nicht. Beachten Sie, dass das Zusammenbruch von Weißen sich auf diesen Ansatz auswirken kann. Mit white-space: pre; könnte notwendig sein.

Lösung 3: inline-block einsetzen

Verwenden Sie display: inline-block; Auf List-Elementen Kräfte bricht, ähnlich wie Null-Breiten-Räume, jedoch ohne visuelle Trennung.

Lösung 4: Nutzen Sie die Flexbox

Verwenden Sie display: flex; oder display: inline-flex; auf der<ul></ul> Ermöglicht eine flexible Linienverpackung.

Während dieses Problem seltener ist, ist es wertvoll, sich dessen und seinen Lösungen bewusst zu sein, insbesondere bei der Verwendung von Minifikern oder Erstellen von Prozessen, die die Whitespace ändern. Viele moderne Werkzeuge mindern dieses Problem, aber das Verständnis der zugrunde liegenden Ursache bleibt wichtig.

Das obige ist der detaillierte Inhalt vonWenn eine Linie nicht bricht. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!