it-swarm.com.de

Wie füge ich mit HTML/CSS Leerzeichen/Tabulatoren in Text ein?

Mögliche Wege:

<pre> ... </pre>

oder

style="white-space:pre"

Noch etwas?

146
Yeseanul

Um tab space zwischen zwei Wörtern/Sätzen einzufügen, verwende ich normalerweise

&emsp; und &ensp;

114
Giri

in Fällen, in denen die Breite/Höhe des Raums jenseits von &nbsp; liegt, verwende ich normalerweise

für horizontalen Abstandhalter:

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

für vertikalen Abstandhalter:

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

Sie können &nbsp; für Leerzeichen verwenden, &lt; für < (weniger als Entitätsnummer &#60;) und &gt; für > (größer als Entitätsnummer &#62;).

Eine vollständige Liste finden Sie unter dieser Adresse: http://www.w3schools.com/html/html_entities.asp

48
Halim Qarroum

probiere &emsp;

Gemäß den Dokumenten unter https://www.w3.org/MarkUp/html3/specialchars.html

Die Zeichenentitäten &ensp; und &emsp; bezeichnen ein Leerzeichen und ein em Leerzeichen, wobei ein Leerzeichen die Hälfte der Punktgröße und ein Em .__ ist. Das Leerzeichen entspricht der Punktgröße der aktuellen Schrift. Für feste Steigung Bei Zeichensätzen kann der Benutzeragent den en space als äquivalent zu A .__ behandeln. Leerzeichen, und das em Leerzeichen entspricht zwei Leerzeichen Zeichen.

35
Abhishek Goel

Ich benutze das gerne:

In Ihrem CSS:

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

In Ihrem HTML: 

<p>Some Text <span class="tab">Tabbed Text</span></p>
20
Ivar Harris
<p style="text-indent: 5em;">
The first line of this paragraph will be indented about five characters, similar to a tabbed indent.
</p>

Die erste Zeile dieses Absatzes wird ungefähr fünf Zeichen eingerückt, ähnlich wie bei einem Tabulatoreinzug

hier für weitere Informationen

13
sammyukavi

Typen von Spaces in HTML

Erzeugt vier Leerzeichen zwischen dem Text- &emsp;

Erzeugt zwei Leerzeichen zwischen dem Text - &ensp;

Erzeugt einen regelmäßigen Abstand zwischen dem Text - &nbsp;

erzeugt ein enges Leerzeichen (ähnlich dem regulären Leerzeichen, aber geringfügiger Unterschied - "&thinsp";

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

Dieser Link kann Ihnen helfen. Check out [ https://hea-www.harvard.edu/~fine/Tech/html-sentences.html]

10
Edgy Affairs

<span style="padding-left:68px;"></span> Sie können auch padding-left verwenden padding-right padding-top padding-bottom

6
Ron1925

Wenn Sie Registerkarten zum Ausrichten von Elementen in einigen Zeilen wünschen, können Sie <table> verwenden.

jede Zeile in <tr> ... </tr> setzen

und jedes Element innerhalb dieser Zeile in <td> ... </td>

natürlich können Sie die Auffüllung jeder Tabellenzelle jederzeit steuern, um den Abstand zwischen ihnen anzupassen

dadurch werden sie ausgerichtet und sie werden hübsch aussehen :)

3
Argento

Warum gehen Sie nicht einen Schritt weiter als @Ivar und stylen mein eigenes benutzerdefiniertes Tag so. Für mich ist 'tab' einfacher 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>

 Screenshot of this code sample

Und mein Screenshot ...

2
Dan

Alternativ als fester oder fester Speicherplatz bezeichnet, wird Non-Breaking SPace (NBSP) bei der Programmierung und bei der Word-Verarbeitung verwendet, um einen Platz in einer Zeile zu erstellen, der nicht durch einen Zeilenumbruch unterbrochen werden kann. Mit HTML können Sie mit &nbsp; mehrere Leerzeichen erstellen, die auf einer Webseite und nicht nur im Quellcode sichtbar sind.

1
mastro

Leerraum, konnten Sie nicht einfach Polsterung verwenden? Das ist eine Idee, sorry, wenn ich dies nicht richtig erhalte, aber so 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;

Nochmals entschuldigen Sie, wenn dies nicht das ist, wonach Sie gesucht haben.

1
James Pac

Das hat für mich funktioniert: In meiner 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 verwende ich im HTML nur meine tabs:

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

die Antwort von user8657661 ist am nächsten an meinen Bedürfnissen (Aneinanderreihen von Dingen über mehrere Zeilen hinweg). Allerdings konnte ich den Beispielcode nicht wie angegeben liefern, sondern musste ihn 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 left:150px in right:150px ändern. Sie müssen jedoch die Anzahl basierend auf der Breite des Bildschirms ändern.

0
Steve McRoberts

Sie können diesen Code &#8287; verwenden, um ein Leerzeichen in den HTML-Code einzufügen. Verwenden Sie den Tabulatorplatz mindestens fünfmal. Überprüfen Sie hier: https://www.w3schools.com/charsets/tryit.asp?deci=8287&ent=ThickSpace

0
Roshan Yadav

warum nicht standard css tab-size?
Zum Einfügen eines Tabulatorsymbols (wenn Sie den Cursor mit der Standard-Tabulatortaste bewegen) drücken Sie ALT + 0 + 0 + 9

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

mein lieber:

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

schnipsel schauen oder
schnell fundiertes Beispiel
https://css-tricks.com/almanac/properties/t/tab-size/

.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>

0
MrSwed