kzen.dev
  • Pertanyaan
  • Tag
  • Pengguna
Notifikasi
Imbalan
Registrasi
Setelah Anda mendaftar, Anda akan diberitahu tentang balasan dan komentar untuk pertanyaan Anda.
Gabung
Jika Anda sudah memiliki akun, masuk untuk memeriksa pemberitahuan baru.
Akan ada hadiah untuk pertanyaan, jawaban, dan komentar tambahan.
Lebih
Sumber
Sunting
 Yeseanul
Yeseanul
Question

Cara menyisipkan spasi/tab dalam teks menggunakan HTML/CSS

Cara yang mungkin:

<pre> ... </pre>

atau

style="white-space:pre"

Hal lain?

168 2012-03-20T18:35:05+00:00 17
Peter Mortensen
Peter Mortensen
Pertanyaan edit 27 Juli 2019 в 5:21
Pemrograman
tabs
space
html
css
pre
Popular videos
Cara Mudah Membuat tag br (enter) dan &amp;nbsp (spasi) HTML
Cara Mudah Membuat tag br (enter) dan &nbsp (spasi) HTML
3 tahun yang lalu
Tutorial Text HTML Part 3 Membuat Paragraf rata kiri, tengah, kanan atau justify
Tutorial Text HTML Part 3 Membuat Paragraf rata kiri, tengah, kanan atau justify
5 tahun yang lalu
Membuat Animasi Teks Berjalan Menggunakan HTML &amp; CSS
Membuat Animasi Teks Berjalan Menggunakan HTML & CSS
1 tahun yang lalu
TERKUAK!!! Beginilah Cara Membuat Tulisan Berjalan di HTML CSS
TERKUAK!!! Beginilah Cara Membuat Tulisan Berjalan di HTML CSS
5 tahun yang lalu
HTML Dasar : Paragraf (5/13)
HTML Dasar : Paragraf (5/13)
7 tahun yang lalu
CSS Layouting - #11 Position : Static &amp; Relative
CSS Layouting - #11 Position : Static & Relative
6 tahun yang lalu
Belajar CSS [2] - Cara Menghubungkan HTML dan CSS
Belajar CSS [2] - Cara Menghubungkan HTML dan CSS
2 tahun yang lalu
Cara Membuat Form Pada Web dengan HTML
Cara Membuat Form Pada Web dengan HTML
2 tahun yang lalu
CARA MEMBUAT STYLES CSS HTML
CARA MEMBUAT STYLES CSS HTML
1 tahun yang lalu
Cara Mengatur Jarak pada Teks dengan CSS
Cara Mengatur Jarak pada Teks dengan CSS
5 tahun yang lalu
Cara Membuat Tulisan Berjalan di HTML
Cara Membuat Tulisan Berjalan di HTML
4 tahun yang lalu
anWriter : 2# CSS Inline Text Styling - Color, Text Indent dan Text Align
anWriter : 2# CSS Inline Text Styling - Color, Text Indent dan Text Align
1 tahun yang lalu
Cara membuat text berwarna-warni dan bergerak warnanya menggunakkan HTML CSS
Cara membuat text berwarna-warni dan bergerak warnanya menggunakkan HTML CSS
1 tahun yang lalu
HTML dan CSS : Membuat Header dan Navigation Bar
HTML dan CSS : Membuat Header dan Navigation Bar
2 tahun yang lalu
Memperbesar / Memperkecil Ukuran Fonts di HTML &amp; CSS
Memperbesar / Memperkecil Ukuran Fonts di HTML & CSS
6 tahun yang lalu
« Sebelumnya
Selanjutnya »
 Giri
Giri
4 Februari 2015 в 12:56
2015-02-04T00:56:57+00:00
Lebih
Sumber
Sunting
#15729912

Untuk menyisipkan tab space di antara dua kata/kalimat, saya biasanya menggunakan

  dan  

Valeriu
Valeriu 54938
Jawaban edit 2 Januari 2023 в 6:51
131
0
 Japol
Japol
20 Maret 2012 в 8:53
2012-03-20T20:53:25+00:00
Lebih
Sumber
Sunting
#15729909

Dalam kasus-kasus dimana lebar/tinggi dari ruang luar &nbsp; saya biasanya menggunakan:

Untuk horizontal spacer:

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

Untuk vertikal spacer:

<span style="display:block; height: YOURHEIGHT;"></span>
110
0
Halim Qarroum
Halim Qarroum
20 Maret 2012 в 6:39
2012-03-20T18:39:21+00:00
Lebih
Sumber
Sunting
#15729908

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

Daftar lengkap dapat ditemukan di Entitas HTML.

53
0
Abhishek Goel
Abhishek Goel
5 Mei 2016 в 7:34
2016-05-05T07:34:17+00:00
Lebih
Sumber
Sunting
#15729915

Mencoba &emsp;.

Sesuai dokumentasi di Karakter Khusus:

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

37
0
Ivar Harris
Ivar Harris
29 Juni 2015 в 4:30
2015-06-29T04:30:53+00:00
Lebih
Sumber
Sunting
#15729913

Saya ingin menggunakan ini:

Di CSS anda:

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

Dalam HTML anda:

<p>Some Text <span class="tab">Tabbed Text</span></p>
23
0
Vivek Budithi
Vivek Budithi
2 September 2018 в 12:28
2018-09-02T12:28:05+00:00
Lebih
Sumber
Sunting
#15729919

Jenis Ruang di HTML

Menciptakan empat spasi antara teks- &emsp;

Menciptakan dua spasi antara teks - &ensp;

Menciptakan ruang biasa antara teks - &nbsp;

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

jarak antara kalimat - "</br>"

Link ini mungkin bisa membantu anda. Check out [https://hea-www.harvard.edu/~fine/Tech/html-sentences.html]

Sentence Spacing in HTML and CSS
hea-www.harvard.edu
17
0
 sammyukavi
sammyukavi
14 Mei 2013 в 5:33
2013-05-14T17:33:04+00:00
Lebih
Sumber
Sunting
#15729910
<p style="text-indent: 5em;">
The first line of this paragraph will be indented about five characters, similar to a tabbed indent.
</p>

Baris pertama dari paragraf ini akan menjorok sekitar lima karakter, mirip dengan tab indent.

Melihat Cara Menggunakan HTML dan CSS untuk Membuat Tab dan Spasi untuk informasi lebih lanjut.

Create an HTML Tab and Spacing in Web Pages Using CSS
Understanding how tabs and white space work in browsers, and how you can get the effect of a tab character on your Web pages using HTML and CSS.
webdesign.about.com
15
0
 Ron1925
Ron1925
23 Juni 2014 в 5:35
2014-06-23T05:35:08+00:00
Lebih
Sumber
Sunting
#15729911

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

Anda juga dapat menggunakan:

padding-left
padding-right
padding-top
padding-bottom
6
0
 Dan
Dan
22 November 2018 в 10:19
2018-11-22T10:19:42+00:00
Lebih
Sumber
Sunting
#15729921

Pergi langkah lebih lanjut dari @Ivar dan gaya saya sendiri kustom tag seperti jadi... Bagi saya 'tab' lebih mudah untuk mengingat dan jenis.

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

Dan HTML pelaksanaan...

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

Screenshot dari sampel kode ini

Dan saya screenshot...

Peter Mortensen
Peter Mortensen
Jawaban edit 27 Juli 2019 в 5:42
3
0
 Argento
Argento
25 April 2016 в 11:58
2016-04-25T23:58:19+00:00
Lebih
Sumber
Sunting
#15729914

Jika anda're meminta tab untuk menyelaraskan hal-hal dalam beberapa baris, anda dapat menggunakan <table>.

Menempatkan masing-masing baris di <tr> ... </tr>. Dan masing-masing elemen dalam baris yang di <td> ... </td>. Dan tentu saja anda selalu dapat mengontrol padding setiap sel tabel untuk menyesuaikan ruang di antara mereka.

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

3
0
 mastro
mastro
17 November 2018 в 5:54
2018-11-17T05:54:54+00:00
Lebih
Sumber
Sunting
#15729920

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

Dengan HTML, &nbsp; memungkinkan anda untuk membuat beberapa ruang yang terlihat pada halaman web dan tidak hanya dalam kode sumber.

Peter Mortensen
Peter Mortensen
Jawaban edit 27 Juli 2019 в 5:40
Non-breaking space - Wikipedia
en.wikipedia.org
3
0
Roshan Yadav
Roshan Yadav
5 Mei 2019 в 8:01
2019-05-05T08:01:57+00:00
Lebih
Sumber
Sunting
#15729923

Anda dapat menggunakan kode ini &#8287; untuk menambahkan ruang di dalam konten HTML. Untuk tab ruang, gunakan 5 kali atau lebih.

Cek contoh di sini: https://www.w3schools.com/charsets/tryit.asp?deci=8287&ent=ThickSpace

Peter Mortensen
Peter Mortensen
Jawaban edit 27 Juli 2019 в 5:47
1
0
 MrSwed
MrSwed
21 Januari 2019 в 9:11
2019-01-21T21:11:15+00:00
Lebih
Sumber
Sunting
#15729922

Menggunakan standar CSS tab-size.

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

css .elemen { -moz-tab-ukuran: 4; tab-ukuran: 4; }

Pilihan saya:

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

Lihat cuplikan atau cepat ditemukan misalnya di 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>
 MrSwed
MrSwed
Jawaban edit 28 Juli 2019 в 4:45
tab-size | CSS-Tricks - CSS-Tricks
The tab-size property in CSS is used to adjust the amount of spaces that display for the tab character.
css-tricks.com
1
0
James Pac
James Pac
11 Januari 2018 в 4:10
2018-01-11T04:10:19+00:00
Lebih
Sumber
Sunting
#15729918

Ruang putih? Tidak't anda hanya menggunakan padding? Itu adalah ide. Itu adalah bagaimana anda dapat menambahkan beberapa "area kosong" seluruh elemen anda. Sehingga anda dapat menggunakan tag CSS berikut:

padding: 5px;
padding-top: 5px;
padding-bottom: 5px;
padding-left: 5px;
padding-right: 5px;
1
0
 user8657661
user8657661
31 Oktober 2017 в 12:42
2017-10-31T12:42:17+00:00
Lebih
Sumber
Sunting
#15729916

Ini bekerja untuk saya:

Di CSS saya yang 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; }

Maka di HTML saya hanya menggunakan tab saya:

Dog Food <tab3> :$30
Milk <tab3> :$3
Pizza Kit <tab3> :$5
Mt Dew <tab3> :$1.75
0
0
Steve McRoberts
Steve McRoberts
16 Desember 2017 в 10:00
2017-12-16T22:00:36+00:00
Lebih
Sumber
Sunting
#15729917

user8657661's jawaban adalah yang paling dekat untuk kebutuhan saya (lapisan hal-hal di beberapa baris). Namun, saya tidak't mendapatkan contoh kode untuk bekerja seperti yang disediakan, tapi aku yang diperlukan untuk perubahan itu 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 perlu benar-blok angka yang anda dapat mengubah kiri:150px ke kanan:150px, tapi anda'll perlu mengubah nomor yang didasarkan pada lebar layar (seperti yang tertulis angka-angka akan menjadi 150 piksel dari tepi kanan layar).

0
0
 James
James
15 Mei 2019 в 1:14
2019-05-15T13:14:47+00:00
Lebih
Sumber
Sunting
#15729924

Berikut ini adalah "Tab" teks (copy dan paste): ", "

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

Peter Mortensen
Peter Mortensen
Jawaban edit 27 Juli 2019 в 5:49
-2
0
Related communities 5
HTML dan CSS Indonesia
HTML dan CSS Indonesia
4 608 pengguna
Silahkan bertanya terkait mengenai HTML maupun CSS. Membaca, menulis, berbagi. Baca dahulu pesan tersemat di pinned post.
Buka telegram
Pemrograman Web Indonesia (HTML CSS Javascript PHP MySQL)
Pemrograman Web Indonesia (HTML CSS Javascript PHP MySQL)
299 pengguna
Official Website : https://webcode.my.id Belajar Pemrograman Web (HTML CSS Javascript PHP MySQL) Grup Belajar Pemrograman Web. HTML + PHP + Javascript + MySQL DB Semoga menjadi forum belajar, menambah wawasan, peningkatan mutu personal kita semua.
Buka telegram
HTML INDONESIA
HTML INDONESIA
104 pengguna
Buka telegram
PHP HTML Indonesia
PHP HTML Indonesia
59 pengguna
~ Menerima Jasa Pembuatan Website untuk : Tugas & Instansi 💻 ~ Forum Diskusi Belajar Bersama ✅ ~ Promosi Jasa Minimal 1x Sehari ✅ ~ Dilarang Berbicara Kotor 🚫 ^ Other Grup : Whatsapp Group : Chat Admin untuk masuk ke Grup Whatsapp ^^
Buka telegram
Css Indonesia
Css Indonesia
14 pengguna
Css Indonesia group ini membahas tentang Css dan web design Bagi yg mau memperdalam Css atau ingin memulai Css atau bahkan Javascript dan html, bisa download aplikasi di bawah ini : https://play.google.com/store/apps/details?id=com.sololearn Thank you
Buka telegram
Tambahkan pertanyaan
Kategori
Semua
Teknologi
Budaya / Rekreasi
Kehidupan / Seni
Ilmu Pengetahuan
Profesional
Bisnis
Pengguna
Semua
Baru
Populer
1
Mansur Zakirov
Terdaftar 1 hari yang lalu
2
Тагир Мамедов
Terdaftar 3 hari yang lalu
3
Алексей Толманов
Terdaftar 3 hari yang lalu
4
Valeriu Vodnicear
Terdaftar 1 minggu yang lalu
5
Alex Johnson
Terdaftar 2 minggu yang lalu
BG
DA
DE
EL
ES
FR
ID
IT
JA
KO
NL
PL
PT
RU
TR
ZH
© kzen.dev 2023
Sumber
stackoverflow.com
di bawah lisensi cc by-sa 3.0 dengan atribusi