Sifat CSS untuk Paparan Kod dan Petikan

Articles

Artikel ini menerangkan sifat CSS yang berkaitan dengan paparan kod dan petikan.

Anda boleh belajar mengenai sifat-sifat CSS yang berkaitan dengan paparan kod dan petikan, seperti quotes dan user-select, termasuk kes penggunaannya dan cara menulisnya.

YouTube Video

HTML untuk Pratonton

css-code-quotation.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-code-quotation.css">
  9</head>
 10<body>
 11    <!-- Header -->
 12    <header>
 13        <h1>CSS Properties For Code Display And Quotations</h1>
 14    </header>
 15
 16    <!-- Main content -->
 17    <main>
 18        <header>
 19            <h2>Code Display And Quotations Related Properties</h2>
 20        </header>
 21        <article>
 22            <h3>white-space</h3>
 23            <section>
 24                <header><h4>white-space: normal</h4></header>
 25                <section class="sample-view">
 26                    <p class="white-space-normal">This is   an example     with    multiple spaces.   The spaces will be collapsed.</p>
 27                </section>
 28                <header><h4>white-space: nowrap</h4></header>
 29                <section class="sample-view">
 30                    <p class="white-space-nowrap">This is an example with no line breaks. The text will not wrap.</p>
 31                </section>
 32                <header><h4>white-space: pre</h4></header>
 33                <section class="sample-view">
 34<p class="white-space-pre">This    is     an
 35    example     with multiple
 36    spaces    and
 37    line breaks.</p>
 38                </section>
 39                <header><h4>white-space: pre-wrap</h4></header>
 40                <section class="sample-view">
 41<p class="white-space-pre-wrap">This    is     an
 42    example     with multiple
 43    spaces    and
 44    line breaks. The text will wrap when it reaches the edge.</p>
 45                </section>
 46            </section>
 47        </article>
 48        <article>
 49            <h3>overflow-wrap</h3>
 50            <section>
 51                <header><h4>overflow-wrap: normal</h4></header>
 52                <section class="sample-view">
 53                    <section class="overflow-wrap-example">
 54                        <p class="overflow-wrap-normal">Thisisaverylongwordthatwillnotbreakwithword-breaknormal.</p>
 55                    </section>
 56                </section>
 57                <header><h4>overflow-wrap: break-word</h4></header>
 58                <section class="sample-view">
 59                    <section class="overflow-wrap-example">
 60                        <p class="overflow-wrap-break-word">Thisisaverylongwordthatwillnotbreakwithword-breaknormal.</p>
 61                    </section>
 62                </section>
 63            </section>
 64        </article>
 65        <article>
 66            <h3>quotes</h3>
 67            <section>
 68                <header><h4>quotes: "(" ")"</h4></header>
 69                <section class="sample-view">
 70                    <p>Here's an example of a quote: <q>CSS makes the web beautiful.</q></p>
 71                </section>
 72                <header><h4>quotes: "(" ")" "[" "]"</h4></header>
 73                <section class="sample-view">
 74                    <p>Here's a nested quote: <q>He said, <q>CSS is powerful.</q></q></p>
 75                </section>
 76            </section>
 77        </article>
 78        <article>
 79            <h3>user-select</h3>
 80            <section>
 81                <header><h4>user-select: auto</h4></header>
 82                <section class="sample-view">
 83                    <p class="select-auto">This text is selectable.</p>
 84                </section>
 85                <header><h4>user-select: none</h4></header>
 86                <section class="sample-view">
 87                    <p class="select-none">This text cannot be selected.</p>
 88                </section>
 89                <header><h4>user-select: all</h4></header>
 90                <section class="sample-view">
 91                    <p class="select-all">All text will be selected at once.</p>
 92                </section>
 93            </section>
 94        </article>
 95        <article>
 96            <h3>tab-size</h3>
 97            <section>
 98                <header><h4>tab-size: initial</h4></header>
 99                <section class="sample-view">
100<pre>
101function example() {
102	console.log("Initial Tab size is 8");
103}
104</pre>
105            </section>
106            <section>
107                <header><h4>tab-size: 2</h4></header>
108                <section class="sample-view">
109<pre class="tab-size-2">
110function example() {
111	console.log("Tab size is set to 2");
112}
113</pre>
114            </section>
115            <header><h4>tab-size: 4</h4></header>
116            <section class="sample-view">
117<pre class="tab-size-4">
118function example() {
119	console.log("Tab size is set to 4");
120}
121</pre>
122            </section>
123            <header><h4>tab-size: 20px</h4></header>
124            <section class="sample-view">
125<pre class="tab-size-20px">
126function example() {
127	console.log("Tab size is set to 20px");
128}
129</pre>
130                </section>
131            </section>
132        </article>
133        <article>
134            <h3>text-indent</h3>
135            <section>
136                <header><h4>text-indent: 0</h4></header>
137                <section class="sample-view">
138                    <p class="text-indent-0">This text has no indentation. The first line starts flush with the left margin.</p>
139                </section>
140                <header><h4>text-indent: 20px</h4></header>
141                <section class="sample-view">
142                    <p class="text-indent-20px">This paragraph has a 20px indentation on the first line.</p>
143                </section>
144                <header><h4>text-indent: -10px</h4></header>
145                <section class="sample-view">
146                    <p class="text-indent--10px">This paragraph has a negative indentation, pulling the first line to the left.</p>
147                </section>
148                <header><h4>text-indent: 10%</h4></header>
149                <section class="sample-view">
150                    <p class="text-indent-10percent">This paragraph has a first-line indentation of 10% of the containing block's width.</p>
151                </section>
152                <header><h4>text-indent: -20px; margin-left:40px;</h4></header>
153                <section class="sample-view">
154                    <p class="text-indent-with-margin">This is an example paragraph using a hanging indent. The second and subsequent lines are indented, while the first line is outdented.</p>
155                </section>
156            </section>
157        </article>
158
159    </main>
160</body>
161</html>

Sifat CSS untuk Paparan Kod dan Petikan

Sifat `white-space`

 1.white-space-normal {
 2    white-space: normal;
 3    border: 1px solid black;
 4    padding: 10px;
 5    width: 300px;
 6}
 7
 8.white-space-nowrap {
 9    white-space: nowrap;
10    border: 1px solid black;
11    padding: 10px;
12    width: 300px;
13}
14
15.white-space-pre {
16    white-space: pre;
17    border: 1px solid black;
18    padding: 10px;
19    width: 300px;
20}
21
22.white-space-pre-wrap {
23    white-space: pre-wrap;
24    border: 1px solid black;
25    padding: 10px;
26    width: 300px;
27}

Sifat white-space adalah ciri CSS yang menetapkan bagaimana ruang kosong dan pemecahan baris dikendalikan dalam suatu elemen. Secara lalai, HTML menganggap ruang berganda sebagai satu ruang, tetapi sifat white-space membolehkan anda mengubah perilaku ini.

Nilai utama `white-space`

normal adalah nilai lalai, di mana ruang berganda digabungkan menjadi satu, dan baris akan pecah secara automatik.
nowrap menggabungkan ruang menjadi satu tetapi menghalang pemecahan baris. Kandungan dipaparkan dalam satu baris.
pre mengekalkan ruang kosong dan pemecahan baris sebagaimana adanya. Pembungkusan baris tidak berlaku.
pre-wrap mengekalkan ruang kosong dan pemecahan baris sambil membenarkan pembungkusan baris.
pre-line menggabungkan ruang tetapi mengekalkan pemecahan baris, dan membenarkan pembungkusan baris.
break-spaces mengekalkan ruang dan pemecahan baris, sambil membenarkan pemisahan pada perkataan panjang atau ruang kosong.

Sifat `overflow-wrap`

 1.overflow-wrap-example {
 2  width: 200px;
 3  border: 1px solid #000;
 4}
 5
 6.overflow-wrap-normal {
 7  overflow-wrap: normal;
 8}
 9
10.overflow-wrap-break-word {
11  overflow-wrap: break-word;
12}

Sifat overflow-wrap, yang dahulunya dikenali sebagai word-wrap, menentukan bagaimana perkataan diuruskan apabila melebihi lebar kontena. Dengan menggunakan sifat ini, anda boleh membungkus perkataan dengan betul untuk mengelakkan teks melimpah dan merosakkan tata letak.

Dalam contoh ini, dengan normal, perkataan panjang mungkin melimpah keluar dari kontena dan menyebabkan pengguliran mendatar, tetapi break-word memaksa perkataan panjang untuk dibungkus.

Nilai sifat

overflow-wrap terutamanya mempunyai dua nilai:.

normal

normal adalah nilai lalai, di mana pelayar mengikuti peraturan pembungkusan perkataan standard. Biasanya, perkataan hanya dibungkus pada titik pemisah seperti ruang atau sempang. Jika perkataan terlalu panjang, ia mungkin melebihi lebar kontena dan merosakkan tata letak.
break-word break-word memaksa pemecahan baris jika perlu, membungkus teks ke baris seterusnya tanpa mengira panjang perkataan. Ini membantu mencegah susun atur bekas daripada rosak disebabkan oleh perkataan yang panjang.

Apabila break-word ditentukan, perkataan akan dibalut walaupun di tempat tanpa ruang atau tanda sempang untuk muat dalam lebar skrin. Ini sangat berguna untuk URL atau perkataan yang sangat panjang.

Perbezaan Antara `overflow-wrap` dan Ciri-Ciri Lain

Ciri-ciri yang serupa dengan overflow-wrap termasuk word-break dan white-space.

Perbezaan dengan `word-break`

word-break menentukan bagaimana keseluruhan perkataan dikendalikan, manakala overflow-wrap hanya mencetuskan pembungkusan apabila perkataan melebihi lebar bekas. Sebagai contoh, word-break: break-all; memecahkan perkataan di mana-mana kedudukan, walaupun tidak panjang, manakala overflow-wrap hanya membalut perkataan apabila ia melebihi bekas.

Perbezaan dengan `white-space`

Ciri white-space mengawal cara pemisahan baris dan ruang dikendalikan dalam keseluruhan teks. Tidak seperti overflow-wrap, white-space menentukan sama ada pemisahan baris dan ruang disimpan tetapi tidak secara langsung mempengaruhi pembungkusan perkataan.

Sebagai contoh, white-space: nowrap; memastikan keseluruhan teks kekal pada satu baris tanpa pembungkusan. Sebaliknya, overflow-wrap mengawal pembungkusan teks.

Kes Penggunaan Praktikal

overflow-wrap amat berguna dalam situasi berikut:.

Memaparkan URL: Mengelakkan isu susun atur apabila memaparkan URL panjang.
Istilah Teknikal: Mengendalikan kes di mana perkataan Inggeris yang berterusan atau istilah teknikal melebihi lebar bekas.
Reka Bentuk Responsif: Memastikan teks panjang tidak merosakkan susun atur walaupun pada skrin kecil.

Properti `quotes`

1q {
2    quotes: "(" ")" "[" "]";
3}

Properti quotes digunakan untuk menyesuaikan tanda petikan. Biasanya, tanda petikan dimasukkan secara automatik apabila membungkus kandungan elemen <blockquote> atau <q>, tetapi menggunakan properti quotes membolehkan anda menentukan tanda petikan khas.

Dalam contoh ini, tanda kurung ((, )) digunakan sebagai tanda petikan luar. Selain itu, tanda petikan bersarang diwakili oleh tanda kurung siku ([, ]).

Sintaks

1element {
2    quotes: [opening-quote closing-quote] [, opening-quote closing-quote] ...;
3}

Properti quotes boleh ditentukan dengan nilai seperti berikut:.

none: Tiada tanda petikan akan dipaparkan.
Satu siri petikan: Tentukan tanda petikan pembukaan dan penutupan. Set pertama mewakili tanda petikan luar, manakala set berikutnya adalah untuk petikan bersarang.

Titik utama mengenai `quotes`

Properti quotes adalah properti yang berguna untuk menyesuaikan tanda petikan dalam petikan teks. Dengan menetapkan tanda petikan yang sesuai mengikut reka bentuk dan bahasa, anda boleh mencapai penyampaian halaman yang lebih canggih. Menggunakan properti quotes memberikan manfaat seperti berikut:.

Sesuaikan tanda petikan: Anda boleh mengubah bentuk lalai tanda petikan atau menetapkan tanda petikan yang sesuai dengan reka bentuk tertentu.
Menyokong petikan bersarang: Anda boleh menggunakan set tanda petikan yang berbeza untuk petikan bersarang.
Boleh disesuaikan mengikut negara dan bahasa: Mudah memohon gaya tanda petikan yang berbeza bergantung pada bahasa atau negara, yang berguna untuk laman web antarabangsa.

Properti `user-select`

 1.select-auto {
 2    user-select: auto;
 3}
 4
 5.select-none {
 6    user-select: none;
 7}
 8
 9.select-all {
10    user-select: all;
11}

Properti user-select adalah properti CSS yang digunakan untuk mengawal sama ada pengguna boleh memilih teks. Dengan menggunakan properti ini, anda boleh menghalang teks daripada disalin dalam elemen tertentu atau di seluruh halaman, atau sebaliknya menjadikannya boleh dipilih. Jika anda menetapkan all untuk sifat user-select, keseluruhan elemen akan dipilih sekaligus. Sebagai contoh, apabila pengguna mengklik pada medan teks atau perenggan, keseluruhan elemen akan dipilih sekaligus.
Ia juga boleh digunakan untuk pemilihan pukal kod sumber.
Dalam contoh ini, teks dalam perenggan pertama boleh dipilih, tetapi teks dalam perenggan kedua tidak dapat dipilih. Dalam kelas select-all, sifat user-select ditetapkan kepada all, membolehkan keseluruhan elemen dipilih sekaligus.

Sintaks

1element {
2    user-select: auto | none | text | all | contain;
3}

Sifat user-select boleh ditentukan dengan nilai-nilai berikut:.

auto: Gunakan tingkah laku lalai pelayar. Pemilihan teks dibenarkan pada kebanyakan elemen, tetapi mungkin terhad pada beberapa elemen interaktif seperti butang dan pautan.
none: Pemilihan teks dimatikan sepenuhnya. Pengguna tidak akan dapat memilih teks dalam elemen tersebut.
text: Membenarkan hanya teks dalam elemen itu dipilih.
all: Keseluruhan elemen dipilih sekaligus. Daripada memilih sebahagian, keseluruhan elemen dipilih sebagai satu unit.
contain: Disokong hanya oleh sesetengah pelayar. Membenarkan hanya elemen di lokasi yang diklik untuk dipilih.

Pelayar yang Disokong

Sifat user-select disokong oleh kebanyakan pelayar moden. Walau bagaimanapun, sesetengah pelayar mungkin memerlukan awalan vendor seperti -webkit-user-select.

Chrome: Disokong
Firefox: Disokong
Safari: Disokong (memerlukan awalan -webkit-)
Edge: Disokong
Internet Explorer: Tidak Disokong

Kes Penggunaan Utama

Sifat user-select menawarkan kelebihan berikut.

Elemen UI: Lumpuhkan pemilihan teks untuk mengelakkan gangguan semasa klik atau operasi seretan.
Cegah penyalinan teks: Cegah pemilihan dan penyalinan teks pada elemen tertentu.
Borang dan elemen interaktif: Gunakan pada elemen interaktif di mana pemilihan teks tidak diperlukan untuk meningkatkan pengalaman pengguna.

Ringkasan

Ciri user-select adalah sifat CSS yang berguna untuk memberikan kawalan fleksibel ke atas pemilihan teks pada laman web. Ia boleh mencegah pengguna daripada secara tidak sengaja memilih teks yang tidak diperlukan atau membolehkan mereka memilih semuanya sekali gus, menyesuaikan pelbagai interaksi.

Ciri `tab-size`

 1.tab-size-2 {
 2    tab-size: 2;
 3}
 4
 5.tab-size-4 {
 6    tab-size: 4;
 7}
 8
 9.tab-size-20px {
10    tab-size: 20px;
11}

Ciri tab-size digunakan untuk mengubah suai ruang bagi aksara tab. Secara lalai, lebar tab biasanya ditetapkan kepada 8 ruang, tetapi ia boleh disesuaikan kepada nilai lain menggunakan ciri tab-size.

Sintaks

1element {
2    tab-size: length | number;
3}

Ciri tab-size boleh menerima jenis nilai berikut.

number: Menentukan lebar aksara tab berdasarkan bilangan aksara. Anda boleh menentukan sama ada integer atau perpuluhan.
length: Menentukan lebar aksara tab menggunakan unit panjang (cth: px, em).

Nota

Ciri tab-size biasanya digunakan dengan fon monospace. Apabila digunakan dengan fon berkadar, lebar tab mungkin menjadi tidak rata.
Apabila menentukan bilangan aksara, berhati-hatilah dengan penskalaan pada peranti yang berbeza.

Ringkasan

Penggunaan ciri tab-size meningkatkan fleksibiliti semasa memaparkan kod atau aksara tab. Sebagai pembangun, menetapkan lebar tab dengan betul memastikan kebolehbacaan kod dan konsistensi reka bentuk.

Ciri `text-indent`

 1p.text-indent-0 {
 2    text-indent: 0;
 3}
 4
 5p.text-indent-20px {
 6    text-indent: 20px;
 7}
 8
 9p.text-indent--10px {
10    text-indent: -10px;
11}
12
13p.text-indent-10percent {
14    text-indent: 10%;
15}
16
17p.text-indent-with-margin {
18    text-indent: -20px;
19    margin-left: 20px;
20}

Ciri text-indent digunakan untuk menyerlahkan baris pertama teks dalam elemen blok dengan jarak yang ditentukan. Ciri ini membolehkan anda menghias hanya baris pertama perenggan.

Sintaks

1element {
2    text-indent: length | percentage;
3}

Ciri text-indent boleh menerima jenis nilai berikut.

length: Menentukan jarak inden menggunakan unit panjang (cth: px, em).
percentage: Menentukan jarak inden sebagai peratusan berdasarkan lebar elemen kontena.

Nota

text-indent hanya berlaku untuk elemen blok. Ia tidak memberi kesan pada elemen sebaris.

Ringkasan

Harta text-indent adalah alat yang mudah tetapi berkuasa untuk mencipta reka bentuk teks yang mudah dibaca. Dengan menguasai asas dan memahami kes penggunaan lanjutan serta pertimbangan, anda boleh menggayakan dengan lebih berkesan.

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

YouTube Video

Ciri-ciri CSS berkaitan dengan jarak teks Sifat-sifat CSS berkaitan dengan model kotak

Sifat CSS untuk Paparan Kod dan Petikan

YouTube Video

HTML untuk Pratonton

Sifat CSS untuk Paparan Kod dan Petikan

Sifat white-space

Nilai utama white-space

Sifat overflow-wrap

Nilai sifat

Perbezaan Antara overflow-wrap dan Ciri-Ciri Lain

Perbezaan dengan word-break

Perbezaan dengan white-space

Kes Penggunaan Praktikal

Properti quotes

Sintaks

Titik utama mengenai quotes

Properti user-select

Sintaks

Pelayar yang Disokong

Kes Penggunaan Utama

Ringkasan

Ciri tab-size

Sintaks

Nota

Ringkasan

Ciri text-indent

Sintaks

Nota

Ringkasan

YouTube Video

Sifat `white-space`

Nilai utama `white-space`

Sifat `overflow-wrap`

Perbezaan Antara `overflow-wrap` dan Ciri-Ciri Lain

Perbezaan dengan `word-break`

Perbezaan dengan `white-space`

Properti `quotes`

Titik utama mengenai `quotes`

Properti `user-select`

Ciri `tab-size`

Ciri `text-indent`