HTML / CSS kullanarak metne boşluk / sekme ekleme

Olası yollar:

<pre> ... </pre>

veya

style="white-space:pre"

Başka herhangi bir şey?

Takmak için tab spaceGenellikle kullanımı iki kelime / cümle arasında

  ve  

Boşluğun genişliğinin / yüksekliğinin ötesinde olduğu durumlarda  genellikle şunu kullanırım:

Yatay ara parça için:

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

Dikey ara parça için:

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

Sen kullanabilirsiniz  , alanlar için <için <(daha az varlık numarası daha <) ve >için >(büyüktür, varlık numarası >).

Tam bir liste HTML Varlıkları'nda bulunabilir .

Deneyin  .

Özel Karakterlerdeki belgelere göre :

Karakter öğelerinin  ve  en uzay yarısı noktası büyüklüğünde ve em boşluğu geçerli yazı tipi nokta boyutuna eşit olduğu, sırasıyla en alana ve em boşluğu belirtir. Sabit aralıklı fontlar için, kullanıcı aracısı en boşluğa A boşluğuna eşdeğer ve em boşluğuna iki boşluk karakterine eşdeğer olarak davranabilir.

Bunu kullanmayı seviyorum:

CSS'nizde:

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

HTML'nizde:

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

SpacesHTML'deki türleri

Metin arasında dört boşluk oluşturur.  

Metin arasında iki boşluk oluşturur -  

Metin arasında düzenli bir boşluk oluşturur -  

dar bir alan yaratır (normal alana benzer ancak küçük bir fark - "&thinsp";

cümleler arası boşluk - "</br>"

Bu bağlantı size yardımcı olabilir. [ Https://hea-www.harvard.edu/~fine/Tech/html-sentences.html] adresine bakın

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

Bu paragrafın ilk satırı, sekmeli girintiye benzer şekilde yaklaşık beş karakter girintili olacaktır.

Daha fazla bilgi için Sekmeler ve Aralıklar Oluşturmak için HTML ve CSS'yi Kullanma konusuna bakın .

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

Ayrıca kullanabilirsiniz:

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

@Ivar'dan bir adım daha ileri git ve kendi özel etiketimi bu şekilde şekillendir ... Benim için 'sekme' nin hatırlanması ve yazılması daha kolay.

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

Ve HTML uygulaması ...

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

Ve ekran görüntüm ...

Bazı satırlardaki öğeleri hizalamak için sekmeler istiyorsanız, kullanabilirsiniz <table>.

Her satırı koymak <tr> ... </tr>. Ve o çizginin içindeki her eleman içeri girer <td> ... </td>. Ve elbette, aralarındaki boşluğu ayarlamak için her tablo hücresinin dolgusunu her zaman kontrol edebilirsiniz.

Bu onları hizalayacak ve oldukça güzel görünecek :)

Alternatif olarak, sabit boşluk veya sert boşluk olarak adlandırılan, boşluk bırakmayan boşluk (NBSP), bir satırda sözcük kaydırma ile kırılamayan bir boşluk oluşturmak için programlama ve sözcük işlemede kullanılır.

HTML ile,  yalnızca kaynak kodunda değil, bir web sayfasında görünen birden çok boşluk oluşturmanıza olanak tanır.

Beyaz boşluk? Sadece dolgu kullanamaz mısın? Bu bir fikir. Öğenizin etrafına "boş alan" ekleyebilirsiniz. Böylece aşağıdaki CSS etiketlerini kullanabilirsiniz:

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

 HTML içeriğine boşluk eklemek için bu kodu kullanabilirsiniz . Sekme alanı için 5 veya daha fazla kez kullanın.

Buradan bir örnek kontrol edin: https://www.w3schools.com/charsets/tryit.asp?deci=8287&ent=ThickSpace

Standart CSS kullanın tab-size.

Bir sekme sembolü eklemek için (standart sekme tuşu varsa, imleci hareket ettir) Alt+ 0+ 0+9

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

Tercih ettiğim:

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

Snippet'e veya sekme boyutunda bulunan hızlı örneğe bakın .

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

Bu benim için çalıştı:

CSS'imde:

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; }

Sonra HTML'de sadece sekmelerimi kullanıyorum:

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

user8657661'in cevabı ihtiyaçlarıma en yakın (birkaç satır boyunca bir şeyler dizmek ). Ancak, sağlanan gibi çalışmak için örnek kod alamadım, ama aşağıdaki gibi değiştirmek gerekiyordu:

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

Eğer sağa hizalanmış numaralar gerekirse değiştirebilir left:150pxiçin right:150px, ancak (ekranın sağ kenarından 150 piksel boyutunda olacak numaralar yazılı gibi) ekran genişliğine dayanan numarayı değiştirmek gerekir.

Sen gibi doldurma yoluyla yapabilirsiniz <span style="padding-left: 20px;">, sen burada daha fazla yol kontrol edebilirsiniz - html boş alan

İşte "Sekme" metni (kopyala yapıştır): ""

Bu sitenin yanıt sınırlamaları nedeniyle farklı görünebilir veya tam bir sekme görünmeyebilir.