Ciri-ciri CSS berkaitan dengan jarak teks

Articles

Artikel ini menerangkan sifat CSS berkaitan jarak teks.

Anda boleh mempelajari penggunaan dan cara menulis sifat seperti line-height dan word-spacing.

YouTube Video

Mencipta HTML untuk pratonton

css-text-space.html

  1<!DOCTYPE html>
  2<html lang="en">
  3<head>
  4    <meta charset="UTF-8">
  5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6    <title>CSS Properties Example</title>
  7    <link rel="stylesheet" href="css-base.css">
  8    <link rel="stylesheet" href="css-text-space.css">
  9</head>
 10<body>
 11    <!-- Header -->
 12    <header>
 13        <h1>Text-Related CSS Properties Example</h1>
 14    </header>
 15
 16    <!-- Main content -->
 17    <main>
 18        <header>
 19            <h2>Typography (Text-Related)</h2>
 20        </header>
 21        <article>
 22            <h3>line-height</h3>
 23            <section>
 24                <header><h4>line-height: normal</h4></header>
 25                <section class="sample-view">
 26                    <p class="line-height-normal">This is a paragraph with normal line height.</p>
 27                </section>
 28                <header><h4>line-height: 1.5</h4></header>
 29                <section class="sample-view">
 30                    <p class="line-height-150">This is a paragraph with 1.5 line height.</p>
 31                </section>
 32                <header><h4>line-height: 200%</h4></header>
 33                <section class="sample-view">
 34                    <p class="line-height-200">This is a paragraph with 200% line height.</p>
 35                </section>
 36            </section>
 37        </article>
 38        <article>
 39            <h3>letter-spacing</h3>
 40            <section>
 41                <header><h4>letter-spacing: normal</h4></header>
 42                <section class="sample-view">
 43                    <p class="letter-spacing-normal">This is text with normal letter spacing.</p>
 44                </section>
 45                <header><h4>letter-spacing: 4px</h4></header>
 46                <section class="sample-view">
 47                    <p class="letter-spacing-wide">This is text with wide letter spacing.</p>
 48                </section>
 49                <header><h4>letter-spacing: -1px</h4></header>
 50                <section class="sample-view">
 51                    <p class="letter-spacing-narrow">This is text with narrow letter spacing.</p>
 52                </section>
 53            </section>
 54        </article>
 55        <article>
 56            <h3>word-spacing</h3>
 57            <section>
 58                <header><h4>word-spacing: normal</h4></header>
 59                <section class="sample-view">
 60                    <p class="word-spacing-normal">This is text with normal word spacing.</p>
 61                </section>
 62                <header><h4>word-spacing: 4px</h4></header>
 63                <section class="sample-view">
 64                    <p class="word-spacing-wide">This is text with wide word spacing.</p>
 65                </section>
 66                <header><h4>word-spacing: -1px</h4></header>
 67                <section class="sample-view">
 68                    <p class="word-spacing-narrow">This is text with narrow word spacing.</p>
 69                </section>
 70                <header><h4>word-spacing: -0.1em; letter-spacing: -0.05em;</h4></header>
 71                <section class="sample-view">
 72                    <p class="word-and-letter-spacing">This is text with word and letter spacing.</p>
 73                </section>
 74            </section>
 75        </article>
 76        <article>
 77            <h3>word-break</h3>
 78            <section>
 79                <header><h4>word-break: normal</h4></header>
 80                <section class="sample-view">
 81                    <p class="box word-break-normal">Thisisaverylongwordthatwillnotbreakwithword-breaknormal.</p>
 82                </section>
 83                <header><h4>word-break: break-all</h4></header>
 84                <section class="sample-view">
 85                    <p class="box word-break-break-all">Thisisaverylongwordthatwillnotbreakwithword-breaknormal.</p>
 86                </section>
 87                <header><h4>word-break: keep-all</h4></header>
 88                <section class="sample-view">
 89                    <p class="box word-break-keep-all">&#12371;&#12428;&#12399;&#26085;&#26412;&#35486;&#12398;&#25991;&#31456;&#12391;&#12377;&#12290;&#12371;&#12398;&#35373;&#23450;&#12391;&#12399;&#33258;&#28982;&#12395;&#25913;&#34892;&#12373;&#12428;&#12414;&#12377;&#12290;</p>
 90                </section>
 91            </section>
 92        </article>
 93        <article>
 94            <h3>hyphens</h3>
 95            <section>
 96                <header><h4>hyphens: none</h4></header>
 97                <section class="sample-view">
 98                    <p class="no-hyphens">
 99                        Supercalifragilisticexpialidocious is a very long word.
100                    </p>
101                </section>
102                <header><h4>HTML</h4></header>
103<pre>
104&lt;p class="no-hyphens"&gt;
105    Supercalifragilisticexpialidocious is a very long word.
106&lt;/p&gt;
107</pre>
108                <header><h4>hyphens: manual</h4></header>
109                <section class="sample-view">
110                    <p class="manual-hyphens">
111                        Super&shy;califragilistic&shy;expialidocious is a very long word.
112                    </p>
113                </section>
114                <header><h4>HTML</h4></header>
115<pre>
116&lt;p class="manual-hyphens"&gt;
117    Super&amp;shy;califragilistic&amp;shy;expialidocious is a very long word.
118&lt;/p&gt;
119</pre>
120                <header><h4>hyphens: auto</h4></header>
121                <section class="sample-view">
122                    <p class="auto-hyphens">
123                        Supercalifragilisticexpialidocious is a very long word.
124                    </p>
125                </section>
126                <header><h4>HTML</h4></header>
127<pre>
128&lt;p class="auto-hyphens"&gt;
129    Supercalifragilisticexpialidocious is a very long word.
130&lt;/p&gt;
131</pre>
132            </section>
133        </article>
134    </main>
135</body>
136</html>

Tipografi (Berkaitan Margin Teks)

harta `line-height`

 1/* Line height examples */
 2.line-height-normal {
 3    line-height: normal; /* Default line height */
 4}
 5
 6.line-height-150 {
 7    line-height: 1.5; /* 1.5 times the font size */
 8}
 9
10.line-height-200 {
11    line-height: 200%; /* 200% of the font size */
12}

line-height adalah sifat CSS yang digunakan untuk menetapkan jarak garis (ketinggian garis). line-height menentukan jarak menegak antara garis, digunakan untuk meningkatkan kebolehbacaan atau melaraskan jarak sebagai sebahagian daripada reka bentuk.

Kegunaan utama `line-height`

Nombor tanpa unit

1p {
2    line-height: 1.5; /* 1.5 times the font size */
3}

Tetapkan ketinggian berkaitan dengan saiz fon. Sebagai contoh, menetapkan 1.5 menetapkan ketinggian garis kepada 1.5 kali saiz fon. Kaedah ini berguna untuk reka bentuk responsif.

Peratusan

1p {
2    line-height: 150%;
3}

Tetapkan ketinggian garis sebagai peratusan daripada saiz fon. Sebagai contoh, menetapkan 150% menetapkan ketinggian garis kepada 150% daripada saiz fon.

Nilai tetap (px, em, rem, dsb.)

1p {
2    line-height: 20px;
3}

Tetapkan ketinggian garis dalam unit mutlak. Sebagai contoh, anda boleh menetapkan nilai konkrit seperti 20px, tetapi ia mungkin kurang fleksibel dalam reka bentuk responsif.

`normal`

1p {
2    line-height: normal;
3}

Menetapkan normal menggunakan tetapan jarak garis lalai penyemak imbas. Kebiasaannya, ia akan menjadi kira-kira 1.2 hingga 1.4 kali saiz fon.

Contoh Penggunaan `line-height`

Perenggan yang boleh dibaca

line-height sekitar 1.5 hingga 1.6 biasanya disyorkan untuk kebolehbacaan. Jika jarak garis terlalu sempit, teks akan kelihatan padat dan sukar dibaca, dan jika terlalu luas, teks akan kelihatan tidak bersambung.

Reka bentuk tajuk

Untuk tajuk dan kepala, di mana teks adalah lebih besar, jarak garis boleh dikurangkan. Tetapan seperti 1.1 atau 1.2 sering digunakan.

Ringkasan

line-height adalah sifat penting untuk meningkatkan kebolehbacaan dan reka bentuk teks.
Menggunakan nilai relatif (nombor atau peratusan) menjadikannya lebih mudah untuk menyesuaikan kepada reka bentuk responsif.
Untuk tajuk dengan teks besar dan perenggan dengan teks kecil, adalah penting untuk menetapkan jarak garis yang sesuai untuk setiapnya.

Memanfaatkan sifat ini boleh menjadikan rupa teks lebih mudah dibaca dan meningkatkan kualiti reka bentuknya.

harta `letter-spacing`

 1/* Letter spacing examples */
 2.letter-spacing-normal {
 3    letter-spacing: normal; /* Default letter spacing */
 4}
 5
 6.letter-spacing-wide {
 7    letter-spacing: 4px; /* Increase letter spacing */
 8}
 9
10.letter-spacing-narrow {
11    letter-spacing: -1px; /* Decrease letter spacing */
12}

letter-spacing adalah sifat CSS yang digunakan untuk melaraskan jarak antara aksara (jarak huruf). Sifat ini boleh digunakan untuk merapikan reka bentuk teks, meningkatkan kebolehbacaan, dan mencapai gaya tertentu.

Dalam contoh ini, ia ditentukan seperti berikut.

normal: Jarak huruf lalai. Ia adalah nilai standard yang ditentukan oleh pelayar dan fon.
4px: Contoh jarak huruf yang diperluas. Menambah 4 piksel ruang di antara setiap aksara.
-1px: Contoh jarak huruf yang dipersempit. Mengurangkan 1 piksel ruang di antara setiap aksara.

Cara Menggunakan `letter-spacing`

Nilai dengan unit

1p.increased {
2    letter-spacing: 2px;  /* Increase letter spacing by 2px */
3}
4p.decreased {
5    letter-spacing: -1em;  /* Decrease letter spacing by 1em */
6}

Menetapkan nilai positif akan meningkatkan jarak huruf.
Menetapkan nilai negatif akan mengurangkan jarak huruf.
Unit biasanya dalam px (piksel) atau em.

Lalai: `normal`

1p {
2    letter-spacing: normal;  /* Default letter spacing */
3}

Gunakan jarak huruf lalai. Secara normal, jarak huruf standard yang ditetapkan oleh fon digunakan.

Contoh penggunaan `letter-spacing`

Meningkatkan kebolehbacaan: Untuk saiz fon kecil atau fon yang terlalu padat, anda boleh meningkatkan kebolehbacaan dengan menambah letter-spacing.
Pelarasan reka bentuk: Anda boleh melaraskan jarak huruf untuk menonjolkan elemen reka bentuk secara visual seperti tajuk atau logo.
Pelarasan antara perkataan: Anda boleh melaraskan jarak pada peringkat huruf, bukannya antara perkataan. letter-spacing melaraskan jarak pada peringkat huruf, tetapi gunakan word-spacing untuk mengembangkan ruang antara perkataan.
Keseimbangan reka bentuk: Jika anda meningkatkan jarak huruf terlalu banyak, keseluruhan teks mungkin kelihatan terlalu meregang. Sebaliknya, jika anda mengurangkannya terlalu banyak, teks boleh menjadi padat dan sukar dibaca, jadi penting untuk mengekalkan keseimbangan yang sesuai.

Ringkasan

letter-spacing ialah atribut yang melaraskan ruang antara huruf, yang memberi kesan kepada reka bentuk dan kebolehbacaan.
Anda boleh meningkatkan jarak dengan nilai positif dan mengurangkannya dengan nilai negatif.
Ia berkesan untuk tajuk dan elemen reka bentuk tertentu, tetapi berhati-hati untuk tidak menjejaskan kebolehbacaan.

Dengan menggunakan atribut ini, anda boleh melaraskan rupa teks dan menghasilkan reka bentuk yang menarik.

Harta `word-spacing`

 1/* Word spacing examples */
 2.word-spacing-normal {
 3    word-spacing: normal; /* Default word spacing */
 4}
 5
 6.word-spacing-wide {
 7    word-spacing: 4px; /* Increase word spacing */
 8}
 9
10.word-spacing-narrow {
11    word-spacing: -1px; /* Decrease word spacing */
12}
13
14.word-and-letter-spacing {
15    word-spacing: -0.1em;
16    letter-spacing: -0.05em;
17}

word-spacing ialah atribut CSS yang mengawal ruang antara perkataan dalam teks. Penggunaan atribut ini dengan betul boleh meningkatkan keseimbangan visual dan kebolehbacaan teks. word-spacing sangat berguna dalam reka bentuk yang berfokus pada tipografi serta senario reka bentuk responsif.

Dalam contoh ini, ia ditentukan seperti berikut.

normal: Menggunakan jarak perkataan lalai. Ini adalah nilai awal pelayar.
4px: Contoh jarak perkataan yang meningkat. Menambah margin sebanyak 4 piksel di antara setiap perkataan.
-1px: Contoh jarak perkataan yang berkurang. Mengurangkan jarak antara setiap perkataan sebanyak 1 piksel.
word-and-letter-spacing: Contoh jarak perkataan dan huruf yang dikurangkan. Mengurangkan jarak antara perkataan sebanyak 0.1em dan antara huruf sebanyak 0.05em berbanding normal.

Menggunakan Nilai Positif dan Negatif

Menetapkan nilai positif untuk word-spacing akan melebarkan jarak antara perkataan. Sebaliknya, menggunakan nilai negatif akan mengecilkan jarak antara perkataan. Nilai negatif boleh digunakan untuk menekankan kesan visual atau untuk mengetatkan jarak huruf bagi alasan reka bentuk tertentu.

Perbezaan dengan `letter-spacing`

word-spacing ialah sifat yang melaraskan jarak antara perkataan, manakala letter-spacing melaraskan jarak antara huruf. Dengan menggabungkan sifat-sifat ini, anda boleh mempunyai kawalan yang lebih tepat ke atas tipografi keseluruhan teks.

Langkah Berjaga-Jaga dan Amalan Terbaik

Pelarasan Jarak Berlebihan: Penggunaan word-spacing yang berlebihan boleh menyebabkan penurunan kebolehbacaan. Khususnya jarak yang terlalu besar atau terlalu kecil boleh menyebabkan tekanan kepada pengguna, oleh itu pelarasan sederhana adalah penting.
Reka Bentuk Responsif: Menentukan nilai relatif menggunakan em atau rem adalah berkesan untuk reka bentuk responsif kerana memastikan paparan yang sesuai di pelbagai saiz skrin.
Pelarasan Gaya Tajuk: Dengan melebarkan jarak antara perkataan dalam teks tajuk, anda boleh menambah penekanan visual. Ini membolehkan anda menjelaskan hierarki kandungan dan mencapai reka bentuk yang sofistikated.

Harta `word-break`

 1p.box {
 2    width: 200px;
 3    border: 1px solid #000;
 4    margin-bottom: 20px;
 5}
 6
 7.word-break-normal {
 8    word-break: normal;
 9}
10
11.word-break-break-all {
12    word-break: break-all;
13}
14
15.word-break-keep-all {
16    word-break: keep-all;
17}

word-break adalah ciri CSS yang mengawal cara teks dipisahkan apabila melebihi lebar bekas. Biasanya, pelayar memecahkan baris pada sempadan perkataan, tetapi tetapan tertentu boleh memperbaiki penampilan dan kebolehbacaan apabila terdapat perkataan panjang atau URL.

Anda boleh menentukan nilai berikut untuk ciri word-break.

normal

normal adalah nilai lalai. Apabila sesuatu perkataan melebihi lebar bekas, ia akan dipecahkan pada sempadan perkataan. Tetapan ini biasa dalam bahasa seperti Bahasa Inggeris, dan pecahan tidak berlaku di tengah perkataan.
break-all

break-all adalah tetapan di mana pecahan baris boleh dimasukkan selepas mana-mana aksara, jika perlu. Terutama apabila perkataan panjang atau URL disertakan, pecahan baris berlaku pada tahap aksara untuk mengelakkan gangguan susun atur.
keep-all

keep-all ialah tetapan yang digunakan khusus untuk bahasa Asia (Bahasa Jepun, Cina, Korea, dll.). Dalam tetapan ini, seluruh perkataan dikekalkan, dan tiada pecahan berlaku di tengah perkataan. Namun, untuk bahasa berasaskan ruang seperti Bahasa Inggeris, pecahan baris sempadan perkataan biasa digunakan.

Contoh ini menunjukkan tiga tetapan word-break yang berbeza. Dengan word-break-normal, keseluruhan perkataan dikekalkan dan pecahan berlaku pada sempadan perkataan jika ia melebihi lebar bekas. Dengan word-break-break-all, pecahan berlaku walaupun di tengah-tengah perkataan. word-break-keep-all membolehkan pecahan semula jadi untuk bahasa Asia seperti Bahasa Jepun dan pecahan sempadan perkataan untuk Bahasa Inggeris.

Senario Aplikasi `word-break`

Peranti Mudah Alih dan Reka Bentuk Responsif

1@media (max-width: 600px) {
2  p {
3    word-break: break-all;
4  }
5}

Pada peranti mudah alih, lebar skrin terhad, yang boleh menyebabkan teks termasuk URL atau perkataan panjang melebihi lebar skrin. Dalam kes seperti ini, penggunaan word-break: break-all; membolehkan pecahan baris pada tahap aksara untuk memuatkan lebar skrin, meningkatkan kebolehbacaan.

Ciri `hyphens`

 1p.no-hyphens {
 2    width: 200px;
 3    hyphens: none;
 4}
 5
 6p.manual-hyphens {
 7    width: 200px;
 8    hyphens: manual;
 9}
10
11p.auto-hyphens {
12    width: 200px;
13    hyphens: auto;
14}

Ciri hyphens digunakan dalam CSS untuk menentukan bagaimana pemisahan perkataan dengan tanda sempang harus dikendalikan ketika memecahkan barisan teks. Dengan menetapkan ciri ini dengan betul, anda boleh meningkatkan kebolehbacaan dan penampilan teks. Pemisahan perkataan dengan tanda sempang amat berguna apabila perkataan panjang perlu dibungkus.
Oleh kerana peraturan pemisahan perkataan berbeza mengikut bahasa, ciri ini bergantung kepada lokal teks.

Sintaks

1element {
2    hyphens: none | manual | auto;
3}

Ciri hyphens boleh ditetapkan kepada nilai berikut:.

none: Tiada pemisahan perkataan dikenakan. Perkataan biasanya akan pecah hanya pada penghujung perkataan.
manual: Pemisahan perkataan dikenakan secara manual. Dalam kes ini, anda perlu menentukan titik pemisahan perkataan secara manual dalam HTML. Sebagai contoh, anda boleh menggunakan  (tanda sempang lembut).
auto: Pelayar secara automatik mengenakan pemisahan perkataan pada kedudukan yang sesuai. Dalam kes ini, atribut bahasa dokumen (lang) mesti ditentukan dengan betul.

Nota

Pentingnya Tetapan Bahasa: Apabila menggunakan hyphens: auto;, pemisahan perkataan yang betul memerlukan atribut lang dalam dokumen HTML ditetapkan dengan betul.
Kebergantungan pada Fon: Beberapa fon mungkin tidak sesuai untuk pemisahan perkataan.
Penggunaan Kamus Pemisahan Perkataan: Peraturan pemisahan perkataan bergantung kepada kamus yang digunakan oleh pelayar. Oleh itu, ia mungkin tidak berfungsi seperti yang dijangkakan untuk bahasa tertentu.

Ringkasan

Dengan menggunakan ciri hyphens dengan betul, anda boleh meningkatkan susun atur teks secara signifikan. Terutama untuk laman sesawang pelbagai bahasa dan reka bentuk mesra mudah alih, penggunaan auto dan manual dengan betul dapat meningkatkan pengalaman pengguna.

Anda boleh mengikuti artikel di atas menggunakan Visual Studio Code di saluran YouTube kami. Sila lihat juga saluran YouTube kami.

YouTube Video

Hartanah CSS yang berkaitan dengan teks Sifat CSS untuk Paparan Kod dan Petikan

Ciri-ciri CSS berkaitan dengan jarak teks

YouTube Video

Mencipta HTML untuk pratonton

Tipografi (Berkaitan Margin Teks)

harta line-height

Kegunaan utama line-height

Nombor tanpa unit

Peratusan

Nilai tetap (px, em, rem, dsb.)

normal

Contoh Penggunaan line-height

Perenggan yang boleh dibaca

Reka bentuk tajuk

Ringkasan

harta letter-spacing

Cara Menggunakan letter-spacing

Nilai dengan unit

Lalai: normal

Contoh penggunaan letter-spacing

Ringkasan

Harta word-spacing

Menggunakan Nilai Positif dan Negatif

Perbezaan dengan letter-spacing

Langkah Berjaga-Jaga dan Amalan Terbaik

Harta word-break

Senario Aplikasi word-break

Peranti Mudah Alih dan Reka Bentuk Responsif

Ciri hyphens

Sintaks

Nota

Ringkasan

YouTube Video

harta `line-height`

Kegunaan utama `line-height`

`normal`

Contoh Penggunaan `line-height`

harta `letter-spacing`

Cara Menggunakan `letter-spacing`

Lalai: `normal`

Contoh penggunaan `letter-spacing`

Harta `word-spacing`

Perbezaan dengan `letter-spacing`

Harta `word-break`

Senario Aplikasi `word-break`

Ciri `hyphens`