Wie stelle ich Leerzeichenabstände innerhalb von Textelementen in CSS ein?

Wie stelle ich den leeren Abstand innerhalb von Textelementen in CSS ein? In diesem Artikel stellen wir Ihnen die Methode zum Festlegen von Leerzeichenfüllungen in Textelementen mithilfe von CSS vor. Es hat einen gewissen Referenzwert. Freunde in Not können sich darauf beziehen. Ich hoffe, es wird Ihnen hilfreich sein.

Heute stelle ich Ihnen vor, wie Sie die Leerraumfüllung in Textelementen über das Leerraumattribut von CSS festlegen. Werfen wir einen Blick auf das Leerraumattribut.

Das Leerraumattribut steuert, wie Text auf dem Element gehandhabt wird, auf das er angewendet wird, und legt fest, wie Leerzeichen innerhalb des Elements gehandhabt werden.

Lassen Sie uns ein solches HTML erstellen:

<div>
   A bunch of words you see.
</div>

Stellen Sie die Breite des Div auf 100 Pixel ein. Fügen Sie bei einer angemessenen Schriftgröße mehr Text hinzu, damit dieser auf 100 Pixel passt. Tut nichts, der Standardwert für Leerzeichen ist normal und der Text wird umbrochen.

div {
  white-space: normal; 
}

Sehen wir uns das Rendering an:

Wenn Sie verhindern möchten, dass Text umbrochen wird, können Sie white-space:nowrap verwenden ;

Bitte beachten Sie: Im HTML-Codebeispiel oben in diesem Beitrag gibt es tatsächlich zwei Zeilenumbrüche, einen vor der Textzeile und einen nach der Textzeile, die den Text in einer eigenen Zeile (im Code) ermöglicht. Wenn der Text im Browser gerendert wird, werden diese Zeilenumbrüche scheinbar entfernt. Außerdem wurden die zusätzlichen Leerzeichen vor dem ersten Buchstaben entfernt. Wenn wir den Browser zwingen möchten, diese Zeilenumbrüche und zusätzlichen Leerzeichen anzuzeigen, können wir white-space: pre;

pre wird aufgerufen Denn dies verhält sich so, als ob Sie den Text in ein

-Tag einschließen würden (pre-Tags können standardmäßig Leerzeichen und Zeilenumbrüche verarbeiten). In HTML sind Leerzeichen vollkommen in Ordnung, der Text wird erst umbrochen, wenn das schließende Tag im Code erscheint. Dies ist besonders nützlich, wenn Code wörtlich angezeigt wird und aus bestimmten Formatierungen ein ästhetischer Nutzen entsteht (und wenn bestimmte Zeiten absolut kritisch sind, wie in Sprachen, die auf Leerzeichen angewiesen sind!)

Vielleicht gefällt Ihnen, wie die Vorstufe mit Leerzeichen umgeht und Zeilenumbrüche, aber Sie müssen den Text umbrechen, anstatt möglicherweise vom übergeordneten Container abzubrechen. Das wäre „white-space: pre-wrap;:

“ Schließlich wird „white-space: pre-line;“ die Zeile an der Stelle unterbrechen, an der der Code unterbrochen wird, sie wird aber trotzdem entfernt aus dem zusätzlichen Leerraumbereich.

Interessanterweise wird der Zeilenumbruch am Ende nicht beachtet. Gemäß der CSS 2.1-Spezifikation: „Zeilen an beibehaltenen Zeilenumbrüchen umbrechen und Zeilenfelder nach Bedarf füllen.“

Hier ist eine Tabelle, um das Verhalten aller verschiedenen Werte zu verstehen:

In CSS3 folgt die Leerraumeigenschaft tatsächlich diesem Diagramm und hat Eigenschaften Ordnen Sie Text-Space-Collapse und Text-Umbruch entsprechend zu.

Kompatibilität

Die Zahl in der Tabelle gibt die erste Browserversionsnummer an, die dieses Attribut unterstützt.

Zusammenfassung: Das Obige ist der gesamte Inhalt dieses Artikels, ich hoffe, dass er für das Studium aller hilfreich sein wird.

Das obige ist der detaillierte Inhalt vonWie stelle ich Leerzeichenabstände innerhalb von Textelementen in CSS ein?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!