Cara memasukkan spasi / tab dalam teks menggunakan HTML / CSS


183

Cara yang mungkin:

<pre> ... </pre>

atau

style="white-space:pre"

Ada yang lain?



Apakah maksud Anda "tag" atau "tab"?
user123444555621

2
Apakah ada yang setara dengan &nbsp;tetapi untuk membuat tab?
Juan Solano

Tidak ada &tab;, tapi saya menemukan potongan js kecil ini di github (pada dasarnya menemukan dan mengganti untuk membuat lima &nbsp;berturut-turut) ... gist.github.com/AustinDizzy/1231e82184bea35c42ad
dgig

Jawaban:


145

Untuk memasukkan tab spaceantara dua kata / kalimat yang biasa saya gunakan

&emsp; dan &ensp;


113

Dalam kasus di mana lebar / tinggi ruang berada di luar &nbsp; biasanya saya gunakan:

Untuk pengatur jarak horizontal:

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

Untuk pengatur jarak vertikal:

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

Catatan: Pastikan untuk menentukan tinggi atau lebar dalam hal piksel, yaitu 10px.
About7Deaths

57

Anda dapat menggunakan &nbsp;spasi, &lt;untuk <(kurang dari, nomor entitas &#60;) dan &gt;untuk >(lebih dari, nomor entitas&#62; ).

Daftar lengkap dapat ditemukan di Entitas HTML .


43

Coba &emsp;.

Sesuai dokumentasi di Karakter Khusus :

Karakter entitas &ensp;dan &emsp;masing-masing menunjukkan en spasi dan ruang em, di mana ruang en adalah setengah ukuran titik dan ruang em sama dengan ukuran titik font saat ini. Untuk font pitch tetap, agen pengguna dapat memperlakukan en space sebagai setara dengan karakter spasi, dan ruang em sebagai setara dengan dua karakter spasi.


24

Saya suka menggunakan ini:

Di CSS Anda:

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

Di HTML Anda:

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

1
Ini jawaban yang bagus. Tapi saya hanya ingin mengatakan bahwa akan lebih baik menggunakan kelas CSS daripada id (itu berarti mengganti #tabdengan .tabdan id="tab"oleh class="tab") karena jika kita menggunakannya lebih dari sekali dalam dokumen yang sama, kita mungkin memiliki perilaku yang tidak terdefinisi. Lihat, misalnya, pertanyaan ini .
Hilder Vitor Lima Pereira

Ini membantu saya hari ini. Terima kasih banyak.
justnisar

19

Jenis dari Spaces dalam HTML

Menciptakan empat spasi di antara teks- &emsp;

Membuat dua spasi di antara teks - &ensp;

Membuat ruang reguler di antara teks - &nbsp;

menciptakan ruang sempit (mirip dengan ruang biasa tetapi sedikit perbedaan - "&thinsp";

jarak antar kalimat - "</br>"

Tautan ini mungkin membantu Anda. Lihat [ https://hea-www.harvard.edu/~fine/Tech/html-sentences.html]



6

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

Anda juga bisa menggunakan:

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

4

Selangkah lebih maju dari @Ivar dan beri style pada tag kustom saya sendiri seperti itu ... Bagi saya 'tab' lebih mudah diingat dan diketik.

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

Dan implementasi HTML ...

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

Cuplikan layar contoh kode ini

Dan tangkapan layar saya ...


3

Jika Anda meminta tab untuk meluruskan hal-hal di beberapa baris, Anda dapat menggunakannya <table>.

Masukkan setiap baris <tr> ... </tr>. Dan setiap elemen dalam baris dalam <td> ... </td>. Dan tentu saja Anda selalu dapat mengontrol bantalan setiap sel tabel untuk menyesuaikan ruang di antara mereka.

Ini akan membuat mereka sejajar dan mereka akan terlihat cukup bagus :)


3
Tabel harus digunakan untuk mewakili data tabular, bukan untuk memformat. Di tabel 90-an di mana sering digunakan untuk memformat karena keterbatasan dalam HTML dan frustrasi menulis HTML dengan gaya yang bekerja secara konsisten di seluruh browser. Saat ini dianggap sebagai anti-pola.
David Baucum

Saya mengerti maksud Anda, Ini mungkin solusi kuno, tetapi saya pernah punya masalah satu kali dan menggunakan tabel bekerja sempurna untuk saya
Argento

1
Ya, tetapi Anda dapat menggunakan gaya tabel (dengan CSS modern) tanpa mengacaukan makna semantik! display: table, dll.
Julix

3

Atau disebut sebagai ruang tetap atau ruang keras, non-breaking space (NBSP) digunakan dalam pemrograman dan pengolah kata untuk membuat ruang dalam garis yang tidak dapat dipecah oleh bungkus kata.

Dengan HTML, &nbsp;Anda dapat membuat banyak ruang yang terlihat di halaman web dan tidak hanya dalam kode sumber.


1

Ruang putih? Tidak bisakah Anda menggunakan bantalan? Itu ide. Itulah cara Anda dapat menambahkan "area kosong" di sekitar elemen Anda. Jadi, Anda dapat menggunakan tag CSS berikut:

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


1

Gunakan CSS standar tab-size .

Untuk menyisipkan simbol tab (jika tombol tab standar, gerakkan kursor) tekan Alt+ 0+ 0+9

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

Pilihan saya:

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

Lihatlah potongan atau contoh cepat yang ditemukan di ukuran tab .

.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

Ini bekerja untuk saya:

Di CSS saya, saya punya:

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

Kemudian di HTML saya hanya menggunakan tab saya:

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

0

jawaban pengguna8657661 adalah yang paling dekat dengan kebutuhan saya (berbaris di beberapa baris). Namun, saya tidak bisa mendapatkan kode contoh berfungsi sebagaimana disediakan, tetapi saya perlu mengubahnya sebagai berikut:

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

Jika Anda membutuhkan nomor kanan-blok Anda dapat mengubah left:150pxke right:150px, tapi Anda harus mengubah nomor berdasarkan lebar layar (seperti yang tertulis angka-angka akan 150 piksel dari tepi kanan layar).



-2

Berikut ini adalah teks "Tab" (salin dan tempel): ""

Ini mungkin tampak berbeda atau tidak tab penuh karena keterbatasan jawaban situs ini.


1
Saya pikir Anda perlu mengutarakan jawabannya dengan lebih jelas. Apakah maksud Anda menyalin dan menempel ruang dari suatu tempat? Saya tidak berpikir itu akan berhasil di sini.
smilyface

1
Ada TAB di sumber penurunan harga, tetapi tidak dalam output HTML di sini (bukan ruang tunggal).
Peter Mortensen
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.