In diesem Artikel erfahren Sie, wie Sie mithilfe von Leerzeichen/Tabulatoren in Text einfügen HTML Und CSS . Da wir wissen, dass HTML standardmäßig nicht mehr als ein Leerzeichen unterstützt, benötigen wir einige zusätzliche Attribute oder CSS, um zusätzlichen Abstand zwischen dem Text zu schaffen.
Dies sind die folgenden Ansätze, mit denen wir Leerzeichen/Tabulatoren in Text einfügen können:
Inhaltsverzeichnis
- Verwendung der HTML-Entitäten
- Verwendung der Tab-Size-Eigenschaft in CSS
- Benutzerdefiniertes CSS verwenden
Verwendung der HTML-Entitäten
- Der Die Zeichenentität wird verwendet, um ein geschütztes Leerzeichen zu kennzeichnen, bei dem es sich um ein festes Leerzeichen handelt. Dies kann als doppelt so groß wie ein normaler Raum wahrgenommen werden. Es wird verwendet, um in einer Zeile ein Leerzeichen zu erzeugen, das nicht durch Zeilenumbruch unterbrochen werden kann.
- Der Die Zeichenentität wird verwendet, um ein „En“-Leerzeichen zu kennzeichnen, das die halbe Punktgröße der aktuellen Schriftart bedeutet. Dies kann als doppelt so groß wie ein normaler Raum wahrgenommen werden.
- Der Die Zeichenentität wird verwendet, um ein „em“-Leerzeichen zu kennzeichnen, das der Punktgröße der aktuellen Schriftart entspricht. Dies kann als viermal so groß wie ein normaler Raum wahrgenommen werden.
Syntax
// Regular space // Two spaces gap // Four spaces gap>
Beispiel: In diesem Beispiel werden wir sehen, wie Leerzeichen verwendet werden. Bitte vergessen Sie nicht, Folgendes hinzuzufügen: , und &emsp im Code, wo Sie Leerzeichen zwischen dem Text hinzufügen müssen.
html Wie füge ich mit HTML/CSS Leerzeichen/Tabulatoren in Text ein? Titel> Kopf> <body> <h1 style='color: green'>techcodeview.comh1> <b>Wie füge ich mit HTML/CSS Leerzeichen/Tabulatoren in Text ein?b><p>Dies ist ein reguläres Leerzeichen.p><p>Dies ist eine Lücke von zwei Leerzeichen.p><p>Dies ist ein Vier-Leerzeichen-Gap.p> body> html>></pre> </code> <p dir='ltr'> <b> <strong>Ausgabe:</strong> </b> </p> <br /> <div id="container-4ae8242bd8e42d94c5c0bf390d5144e6"></div><br /><blockquote style="text-transform: capitalize;font-size: 20px; padding: 10px;"><a href="/java-string-contains">Java enthält Teilzeichenfolge</a>
</blockquote> <img src='//techcodeview.com/img/css-questions/66/how-insert-spaces-tabs-text-using-html.webp' alt="Wohltätigkeitsorganisationen"><h2 id='using-the-tabsize-property-in-css'> <b> <strong>Verwenden der tab-size-Eigenschaft in CSS</strong> </b> </h2><p dir='ltr'><span>Der</span> <span>tab-size-Eigenschaft in CSS</span> <span>wird verwendet, um die Anzahl der Leerzeichen auf jedem Tabulatorzeichen festzulegen, das angezeigt wird. Wenn Sie diesen Wert ändern, können Sie auf einem Tabulatorzeichen die benötigte Menge an Leerzeichen einfügen. Diese Methode funktioniert jedoch nur mit vorformatiertem Text (mit</span></p><pre class='hljs'> tags). The tab character can be inserted by holding the Alt and pressing 0 and 9 together. Syntax .tab { tab-size: value; /* for e.g: value = 2*/ } Example: In this example, we are going to implement the above-explained method. html <html> <head> <title>Wie füge ich mit HTML/CSS Leerzeichen/Tabulatoren in Text ein? Titel><style>.tab1 { tab-size: 2; } .tab2 { tab-size: 4; } .tab4 { tab-size: 8; } style> head> <body> <h1 style='color: green'>techcodeview.comh1> <b>Wie füge ich mit HTML/CSS Leerzeichen/Tabulatoren in Text ein?b><pre class='hljs'zalupa>Dies ist eine Registerkarte mit 2 Leerzeichen.pre><pre class='hljs'zalupa>Dies ist eine Registerkarte mit 4 Leerzeichen.pre><pre class='hljs'zalupa>Dies ist eine Registerkarte mit 8 Leerzeichen.pre> body> html> Ausgabe: Benutzerdefiniertes CSS verwenden Eine neue Klasse kann erstellt werden, die mithilfe der Eigenschaft margin-left einen bestimmten Abstand vorgibt. Der Platzbedarf kann durch die in dieser Eigenschaft angegebene Anzahl von Pixeln angegeben werden. Die Anzeigeeigenschaft ist außerdem auf „inline-block“ gesetzt, sodass nach dem Element kein Zeilenumbruch eingefügt wird. Dadurch kann der Raum neben Text und anderen Elementen platziert werden. Syntax .tab { display: inline-block; margin-left: Wert; /* für z.B.: value = 40px*/ } Beispiel: In diesem Beispiel werden wir die oben erläuterte Methode implementieren. html<html> <head> <title>Wie füge ich mit HTML/CSS Leerzeichen/Tabulatoren in Text ein? Titel><style>.tab { display: inline-block; Rand links: 40px; } style> head> <body> <h1 style='color: green'>techcodeview.comh1> <b>Wie füge ich mit HTML/CSS Leerzeichen/Tabulatoren in Text ein?b><p>Das ist ein<span>span>Tab-Leerzeichen im Dokument.p> body> html> Ausgabe:></pre></article>
</div><!--//content-->
</div><!--//section-inner-->
</section><!--//section-->
</div><!--//primary-->
<div class="secondary col-md-4 col-sm-12 col-xs-12">
<aside class="info aside section">
<div class="section-inner">
<h2 class="">Kategorie</h2>
<div class="content">
<ul class="list-unstyled">
<li> <a href="/definitions/">Definitionen</a> </li><li> <a href="/logarithms/">Logarithmen</a> </li><li> <a href="/ruby-tutorial/">Ruby-Tutorial</a> </li><li> <a href="/java-i-o/">Java-E/A</a> </li><li> <a href="/counter/">Schalter</a> </li><li> <a href="/javascript-misc/">Javascript-Verschiedenes</a> </li><li> <a href="/linux-system-admin/">Linux-Systemadministrator</a> </li><li> <a href="/c/">C ++</a> </li><li> <a href="/python-pandas-dataframe-methods/">Python Pandas-Dataframe-Methoden</a> </li><li> <a href="/linked-list-sorting/">Sortierung Verknüpfter Listen</a> </li>
</ul>
</div><!--//content-->
</div><!--//section-inner-->
</aside><!--//aside-->
<aside class="testimonials aside section">
<div class="section-inner">
<h2 class="heading">Linux-Datumsbefehl</h2>
<div class="content">
<div class="item">
<blockquote class="quote">
<span> <i class="fa fa-quote-left"></i> Linux-Termin für Anfänger und Profis mit Beispielen zu Dateien, Verzeichnissen, Berechtigungen, Backup, ls, man, pwd, cd, chmod, man, Shell, Pipes, Filter, Regex, vi usw.</span>
</blockquote>
</div><!--//item-->
<p> <a class="more-link" href="/linux-date-command"> <i class="fa fa-external-link"></i> Weiterlesen</a> </p>
</div><!--//content-->
</div><!--//section-inner-->
</aside><!--//section-->
<aside class="languages aside section">
<div class="section-inner">
<h2 class="heading">Interessante Artikel</h2>
<div class="content">
<ul class="list-unstyled">
<li class="item">
<span class="title"> <strong> <a href="/linux-directories">Linux-Verzeichnisse</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/javascript-addeventlistener-with-examples">JavaScript addEventListener() mit Beispielen</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/understanding-basics-linked-list">Die Grundlagen der verknüpften Liste verstehen</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/css-font-size">CSS-Schriftgröße</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/loops-python">For-Schleifen in Python</a> </strong> </span>
</li><!--//item-->
</ul>
</div><!--//content-->
</div><!--//section-inner-->
</aside><!--//section-->
<aside class="list music aside section">
<div class="section-inner">
<h2 class="heading">Beliebte Beiträge</h2>
<div class="content">
<ul class="list"> <li><a href="/latex-table">Erstellen von Tabellen in Latex</a>
</li><li><a href="/python-operators">Operatoren in der Python-Programmierung</a>
</li><li><a href="/java-convert-int-char">int, um Java zu char</a>
</li><li><a href="/how-download-youtube-video-vlc-media-player">Laden Sie YouTube-Videos VLC herunter</a>
</li><li><a href="/java-string-isempty">Zeichenfolge ist leer</a>
</li>
</ul>
</div><!--//content-->
</div><!--//section-inner-->
</aside><!--//section-->
</div><!--//secondary-->
</div><!--//row-->
</div><!--//masonry-->
<footer class="footer">
<div class="container text-center">
<span>
Copyright ©2025 Alle Rechte Vorbehalten | <a href="//ko.techcodeview.com/">techcodeview.com</a> | <a href="/disclaimer" rel="nofollow noopener noreferrer" target="_blank">Haftungsausschluss</a> | <a href="/about-us" rel="nofollow noopener noreferrer" target="_blank">Über Uns</a> | <a href="/privacy-policy" rel="nofollow noopener noreferrer" target="_blank">Datenschutzrichtlinie</a> </span>
</div>
</footer>
<script type="text/javascript" src="https://techcodeview.com/template/assets/plugins/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="https://techcodeview.com/template/assets/plugins/bootstrap/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://techcodeview.com/template/assets/js/main.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.5.1/highlight.min.js"></script>
</body>
</html>