Heim Web-Frontend HTML-Tutorial So verwenden Sie Leerzeichen in HTML

So verwenden Sie Leerzeichen in HTML

Nov 22, 2017 pm 03:17 PM
html white-space 使用

white-space ist ein HTML-Tag, daher geben wir Ihnen heute einige populärwissenschaftliche Informationen darüber, wie Sie dieses Attribut verwenden und in welchen Situationen es verwendet werden kann

Leerraumnorma Nowrap erzwingt die Anzeige des gesamten Textes in derselben Zeile, sodass der gesamte Textinhalt in einer Zeile ohne Zeilenumbrüche angezeigt wird.

Lassen Sie den Text nicht automatisch umbrechen, egal wie stark die CSS-Breite eingestellt ist, der gesamte Text wird in einer Zeile angezeigt. Insbesondere für die Titelliste möchten wir nur einen Titelinhalt pro Zeile anzeigen. Manchmal ist die Breite begrenzt und der Titeltext ist zu breit (Breite), was dazu führt, dass der Text automatisch umbrochen wird , wir können den Leerraumstil verwenden, um ihn in einer Zeile anzuzeigen. Um den überschüssigen Textinhalt auszublenden, können wir natürlich einen CSS-Überlauf:hidden-Stil hinzufügen.

Leerzeichen-Syntax:

Leerzeichen: normaler Nowrap

Leerzeichen-Parameter:

normal: Standardverarbeitungsmethode

nowrap: Erzwingt, dass der gesamte Text in derselben Zeile angezeigt wird, bis der Text endet oder ein br-Tag-Objekt gefunden wird. Es wird empfohlen, „white-space:nowrap“ zu verwenden, um keine Zeilenumbrüche zu erzwingen.

white-space legt den Textanzeigemodus innerhalb des Objekts fest oder ruft ihn ab. Normalerweise verwenden wir „white-space:nowrap“, um zu erzwingen, dass der Inhalt in einer Zeile angezeigt wird.

Normalerweise verwenden wir „white-space:nowrap“, um zu erzwingen, dass der Textinhalt nicht umgebrochen wird, und um den gesamten Textinhalt in einer Zeile anzuzeigen innerhalb des Objekts.

Ich habe zwei Objektboxen eingerichtet, eine Einstellung zwingt den Peer, Textinhalte anzuzeigen. Die zweite Einstellung erzwingt die Anzeige von Peers, verwendet jedoch das HTML-Tag br, um den Effekt zu beobachten. Für den Leerraum-Anwendungseffekt habe ich die CSS-Breite auf 120 Pixel, die CSS-Höhe auf 60 Pixel und die CSS-Zeilenhöhe Zeilenhöhe auf 20 Pixel festgelegt.

CSS-Code

<style> 
div{ width:120px; height:60px; line-height:20px} 
.div{ white-space:nowrap} 
</style>
Nach dem Login kopieren

2. HTML-Code-Snippet

<div class="div">内容将在一行内强制显示完整</div> 
<div class="div">内容使用br换行<br /> 
将会不被<br />换行显示</div>
Nach dem Login kopieren

Jeden Tag, um den Textinhalt in einer Zeile anzuzeigen, auch wenn der Die Breite reicht nicht aus. Wir können den White-Space-Stil nicht verwenden. Wenn wir jedoch auf das HTML-BR-Tag für erzwungene Zeilenumbrüche stoßen, wird ein Zeilenumbruch durch < erzwungen, unabhängig davon, ob White-Space gesetzt ist oder nicht. br>.

Ich glaube, Sie haben es verstanden. Freunde in Not können es sich sparen. Achten Sie bitte weiterhin auf andere Updates auf dieser Website.

Verwandte Lektüre:

So verwenden Sie Label-Tags in HTML


DIV-Hintergrundbildhintergrund So legen Sie fest:


So ändern Sie das HTML-Titel-Tag-Element

Das obige ist der detaillierte Inhalt vonSo verwenden Sie Leerzeichen in HTML. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

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

Heiße KI -Werkzeuge

Undresser.AI Undress

Undresser.AI Undress

KI-gestützte App zum Erstellen realistischer Aktfotos

AI Clothes Remover

AI Clothes Remover

Online-KI-Tool zum Entfernen von Kleidung aus Fotos.

Undress AI Tool

Undress AI Tool

Ausziehbilder kostenlos

Clothoff.io

Clothoff.io

KI-Kleiderentferner

Video Face Swap

Video Face Swap

Tauschen Sie Gesichter in jedem Video mühelos mit unserem völlig kostenlosen KI-Gesichtstausch-Tool aus!

Heiße Werkzeuge

Notepad++7.3.1

Notepad++7.3.1

Einfach zu bedienender und kostenloser Code-Editor

SublimeText3 chinesische Version

SublimeText3 chinesische Version

Chinesische Version, sehr einfach zu bedienen

Senden Sie Studio 13.0.1

Senden Sie Studio 13.0.1

Leistungsstarke integrierte PHP-Entwicklungsumgebung

Dreamweaver CS6

Dreamweaver CS6

Visuelle Webentwicklungstools

SublimeText3 Mac-Version

SublimeText3 Mac-Version

Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

Tabellenrahmen in HTML Tabellenrahmen in HTML Sep 04, 2024 pm 04:49 PM

Anleitung zum Tabellenrahmen in HTML. Hier besprechen wir verschiedene Möglichkeiten zum Definieren von Tabellenrändern anhand von Beispielen für den Tabellenrand in HTML.

Verschachtelte Tabelle in HTML Verschachtelte Tabelle in HTML Sep 04, 2024 pm 04:49 PM

Dies ist eine Anleitung für verschachtelte Tabellen in HTML. Hier diskutieren wir anhand der entsprechenden Beispiele, wie man eine Tabelle innerhalb der Tabelle erstellt.

HTML-Rand links HTML-Rand links Sep 04, 2024 pm 04:48 PM

Anleitung zum HTML-Rand links. Hier besprechen wir einen kurzen Überblick über HTML margin-left und seine Beispiele sowie seine Code-Implementierung.

HTML-Tabellenlayout HTML-Tabellenlayout Sep 04, 2024 pm 04:54 PM

Leitfaden zum HTML-Tabellenlayout. Hier besprechen wir die Werte des HTML-Tabellenlayouts zusammen mit den Beispielen und Ausgaben im Detail.

HTML-Eingabeplatzhalter HTML-Eingabeplatzhalter Sep 04, 2024 pm 04:54 PM

Leitfaden für HTML-Eingabeplatzhalter. Hier besprechen wir die Beispiele für HTML-Eingabeplatzhalter zusammen mit den Codes und Ausgaben.

Text in HTML verschieben Text in HTML verschieben Sep 04, 2024 pm 04:45 PM

Anleitung zum Verschieben von Text in HTML. Hier besprechen wir eine Einführung, wie Marquee-Tags funktionieren, mit Syntax und Beispielen für die Implementierung.

HTML-geordnete Liste HTML-geordnete Liste Sep 04, 2024 pm 04:43 PM

Leitfaden zur HTML-geordneten Liste. Hier besprechen wir auch die Einführung von HTML-geordneten Listen und Typen sowie deren Beispiele

HTML-Onclick-Button HTML-Onclick-Button Sep 04, 2024 pm 04:49 PM

Anleitung zum HTML-OnClick-Button. Hier diskutieren wir deren Einführung, Funktionsweise, Beispiele und Onclick-Events in verschiedenen Veranstaltungen.

See all articles