So fügen Sie Leerzeichen / Tabulatoren mit HTML / CSS in Text ein

Mögliche Wege:

<pre> ... </pre>

oder

style="white-space:pre"

Noch etwas?

Zum Einfügen tab spacezwischen zwei Wörtern / Sätzen verwende ich normalerweise

  und  

In Fällen, in denen die Breite / Höhe des Raums darüber hinaus liegt   ich normalerweise:

Für horizontale Abstandshalter:

<span style="display:inline-block; width: YOURWIDTH;"></span>

Für vertikale Abstandshalter:

<span style="display:block; height: YOURHEIGHT;"></span>

Sie können  für Leerzeichen, <für <(kleiner als Entitätsnummer <) und >für >(größer als Entitätsnummer >) verwenden.

Eine vollständige Liste finden Sie unter HTML-Entitäten .

Versuchen Sie es  .

Gemäß der Dokumentation unter Sonderzeichen :

Die Zeichenentitäten  und  bezeichnen einen en-Raum bzw. einen em-Raum, wobei ein en-Raum die Hälfte der Punktgröße und ein em-Raum der Punktgröße der aktuellen Schriftart entspricht. Bei Schriftarten mit fester Tonhöhe kann der Benutzeragent das Leerzeichen als äquivalent zu einem Leerzeichen und das em Leerzeichen als äquivalent zu zwei Leerzeichen behandeln.

Ich benutze dies gerne:

In Ihrem CSS:

.tab { 
       display:inline-block; 
       margin-left: 40px; 
}

In Ihrem HTML:

<p>Some Text <span class="tab">Tabbed Text</span></p>

Arten von Spacesin HTML

Erstellt vier Leerzeichen zwischen dem Text-  

Erstellt zwei Leerzeichen zwischen dem Text -  

Erstellt einen regelmäßigen Abstand zwischen dem Text -  

schafft einen engen Raum (ähnlich wie normaler Raum, aber geringfügiger Unterschied - "&thinsp";

Abstand zwischen Sätzen - "</br>"

Dieser Link könnte Ihnen helfen. Überprüfen Sie heraus [ https://hea-www.harvard.edu/~fine/Tech/html-sentences.html]

<p style="text-indent: 5em;">
The first line of this paragraph will be indented about five characters, similar to a tabbed indent.
</p>

In der ersten Zeile dieses Absatzes werden ungefähr fünf Zeichen eingerückt, ähnlich wie bei einem Einzug mit Registerkarten.

Siehe Wie Verwenden Sie HTML und CSS erstellen Tabs und Abstände für weitere Informationen.

<span style="padding-left:68px;"></span>

Sie können auch verwenden:

padding-left
padding-right
padding-top
padding-bottom

Gehen Sie einen Schritt weiter als @Ivar und gestalten Sie mein eigenes benutzerdefiniertes Tag wie folgt ... Für mich ist es einfacher, sich die Registerkarte zu merken und einzugeben.

tab {
    display: inline-block;
    margin-left: 40px;
}

Und die HTML-Implementierung ...

<p>Left side of the whitespace<tab>Right side of the whitespace</p>

Und mein Screenshot ...

Wenn Sie nach Registerkarten fragen, um Inhalte in einigen Zeilen auszurichten, können Sie sie verwenden <table>.

Jede Zeile einfügen <tr> ... </tr>. Und jedes Element in dieser Zeile in <td> ... </td>. Und natürlich können Sie jederzeit die Auffüllung jeder Tabellenzelle steuern, um den Abstand zwischen ihnen anzupassen.

Dadurch werden sie ausgerichtet und sie sehen ziemlich gut aus :)

Alternativ als fester oder harter Raum bezeichnet, wird NBSP ( Non-Breaking Space ) bei der Programmierung und Textverarbeitung verwendet, um einen Raum in einer Zeile zu erstellen, der nicht durch Zeilenumbruch unterbrochen werden kann.

Mit HTML  können Sie mehrere Bereiche erstellen, die auf einer Webseite und nicht nur im Quellcode sichtbar sind.

Leerraum? Könnten Sie nicht einfach Polsterung verwenden? Das ist eine Idee. Auf diese Weise können Sie einen "leeren Bereich" um Ihr Element hinzufügen. Sie können also die folgenden CSS-Tags verwenden:

padding: 5px;
padding-top: 5px;
padding-bottom: 5px;
padding-left: 5px;
padding-right: 5px;

Sie können diesen Code verwenden   dem HTML-Inhalt ein Leerzeichen hinzufügen. Verwenden Sie die Registerkarte mindestens fünfmal.

Überprüfen Sie hier ein Beispiel: https://www.w3schools.com/charsets/tryit.asp?deci=8287&ent=ThickSpace

Verwenden Sie das Standard-CSS tab-size .

Um ein Tabulatorsymbol einzufügen (wenn die Standard-Tabulatortaste gedrückt ist, bewegen Sie den Cursor), drücken Sie Alt+ 0+ 0+9

.element {
    -moz-tab-size: 4;
    tab-size: 4;
}

Mein bevorzugter:

*{-moz-tab-size: 1; tab-size: 1;}

Schauen Sie sich ein Snippet oder ein schnell gefundenes Beispiel in Tab-Größe an .

.t1{
    -moz-tab-size: 1;
    tab-size: 1;
}
.t2{
    -moz-tab-size: 2;
    tab-size: 2;
}
.t4{
    -moz-tab-size: 4;
    tab-size: 4;
}
pre {border: 1px dotted;}

<h3>tab = {default} space</h3>
<pre>
	one tab text
		two tab text
</pre>

<h3>tab = 1 space</h3>
<pre class="t1">
	one tab text
		two tab text
</pre>

<h3>tab = 2 space</h3>
<pre class="t2">
	one tab text
		two tab text
</pre>

<h3>tab = 4 space</h3>
<pre class="t4">
	one tab text
		two tab text
</pre>

Das hat bei mir funktioniert:

In meinem CSS habe ich:

tab0  { position:absolute;left:25px;  }
tab1  { position:absolute;left:50px;  }
tab2  { position:absolute;left:75px;  }
tab3  { position:absolute;left:100px; }
tab4  { position:absolute;left:125px; }
tab5  { position:absolute;left:150px; }
tab6  { position:absolute;left:175px; }
tab7  { position:absolute;left:200px; }
tab8  { position:absolute;left:225px; }
tab9  { position:absolute;left:250px; }
tab10 { position:absolute;left:275px; }

Dann benutze ich im HTML einfach meine Tabs:

Dog Food <tab3> :$30
Milk <tab3> :$3
Pizza Kit <tab3> :$5
Mt Dew <tab3> :$1.75

Die Antwort von user8657661 entspricht am ehesten meinen Anforderungen (Dinge über mehrere Zeilen hinweg auszurichten ). Ich konnte den Beispielcode jedoch nicht wie angegeben zum Laufen bringen, musste ihn jedoch wie folgt ändern:

<html>
    <head>
        <style>
            .tab9 {position:absolute;left:150px; }
        </style>
    </head>

    <body>
        Dog Food: <span class="tab9"> $30</span><br/>
        Milk of Magnesia:<span class="tab9"> $30</span><br/>
        Pizza Kit:<span class="tab9"> $5</span><br/>
        Mt Dew <span class="tab9"> $1.75</span><br/>
    </body>
</html>

Wenn Sie rechtsbündige Zahlen benötigen , können Sie ändern left:150pxzu right:150px, aber Sie werden die Nummer auf der Breite des Bildschirms basierend ändern müssen (wie die Zahlen geschrieben vom rechten Rand des Bildschirms 150 Pixel wäre).

Sie können dies durch Auffüllen tun <span style="padding-left: 20px;">. Sie können hier unter - Leerzeichen in HTML weitere Möglichkeiten überprüfen

Hier ist ein "Tab" -Text (Kopieren und Einfügen): ""

Aufgrund der Antwortbeschränkungen dieser Site kann es anders oder nicht vollständig angezeigt werden.