คุณสมบัติ CSS สำหรับการแสดงโค้ดและคำอ้างอิง
บทความนี้อธิบายคุณสมบัติ CSS ที่เกี่ยวข้องกับการแสดงโค้ดและคำอ้างอิง
คุณสามารถเรียนรู้เกี่ยวกับคุณสมบัติ CSS ที่เกี่ยวข้องกับการแสดงโค้ดและการอ้างอิง เช่น quotes และ user-select รวมถึงกรณีการใช้งานและวิธีเขียน
YouTube Video
HTML สำหรับการแสดงตัวอย่าง
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>คุณสมบัติ CSS สำหรับการแสดงโค้ดและคำอ้างอิง
คุณสมบัติ 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}คุณสมบัติ white-space เป็นคุณสมบัติ CSS ที่กำหนดวิธีการจัดการช่องว่างและการตัดบรรทัดภายในองค์ประกอบ โดยค่าเริ่มต้น HTML จะจัดการช่องว่างหลายช่องเป็นช่องเดียว แต่คุณสมบัติ white-space ช่วยให้คุณปรับเปลี่ยนพฤติกรรมนี้ได้
ค่าหลักของ white-space
normalเป็นค่าเริ่มต้น ซึ่งช่องว่างหลายช่องจะถูกรวมเป็นช่องเดียว และการตัดบรรทัดจะเกิดขึ้นโดยอัตโนมัติnowrapจะรวมช่องว่างเป็นช่องเดียวแต่ป้องกันการตัดบรรทัด เนื้อหาจะแสดงเป็นบรรทัดเดียวpreจะรักษาช่องว่างและการตัดบรรทัดตามที่มีอยู่ จะไม่มีการตัดบรรทัดpre-wrapรักษาช่องว่างและการตัดบรรทัดในขณะที่อนุญาตให้มีการตัดคำpre-lineจะรวมช่องว่างแต่รักษาการตัดบรรทัด และอนุญาตให้มีการตัดคำbreak-spacesรักษาช่องว่างและการตัดบรรทัด ในขณะที่อนุญาตให้มีการตัดคำเมื่อเจอคำยาวหรือช่องว่าง
คุณสมบัติ 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}คุณสมบัติ overflow-wrap หรือที่เคยรู้จักในชื่อ word-wrap กำหนดการจัดการคำเมื่อคำเหล่านั้นเกินความกว้างของคอนเทนเนอร์ การใช้คุณสมบัตินี้ช่วยให้คุณตัดคำอย่างเหมาะสมเพื่อป้องกันข้อความล้นและการเสียรูปแบบเลย์เอาต์
ในตัวอย่างนี้ ค่า normal อาจทำให้คำที่ยาวเกินล้นออกจากคอนเทนเนอร์และเกิดการเลื่อนในแนวนอน แต่ค่า break-word บังคับให้คำที่ยาวถูกตัดไปบรรทัดถัดไป
ค่าของคุณสมบัติ
overflow-wrap มีค่าอยู่สองค่าหลัก ๆ:
-
normalnormalเป็นค่าเริ่มต้น โดยเบราว์เซอร์จะปฏิบัติตามกฎการตัดคำตามมาตรฐาน ปกติแล้ว คำจะถูกตัดเฉพาะในจุดที่สามารถตัดได้ เช่น ช่องว่างหรือเครื่องหมายขีดกลาง ถ้าคำยาวมาก อาจล้นความกว้างของคอนเทนเนอร์และทำให้รูปแบบเลย์เอาต์เสีย -
break-wordbreak-wordบังคับการตัดบรรทัดหากจำเป็น โดยตัดข้อความไปบรรทัดถัดไปไม่ว่าความยาวของคำนั้นจะเป็นเท่าใด สิ่งนี้ช่วยป้องกันการจัดรูปแบบคอนเทนเนอร์จากการเสียหายเนื่องจากคำที่ยาวเกินไปเมื่อระบุ
break-wordคำจะถูกแบ่งบรรทัด แม้ในจุดที่ไม่มีช่องว่างหรือขีดกลางเพื่อให้พอดีกับความกว้างของหน้าจอ สิ่งนี้มีประโยชน์เป็นพิเศษสำหรับ URL หรือคำที่ยาวมาก
ความแตกต่างระหว่าง overflow-wrap กับคุณสมบัติอื่น ๆ
คุณสมบัติที่คล้ายกับ overflow-wrap ได้แก่ word-break และ white-space
ความแตกต่างจาก word-break
word-break กำหนดวิธีการจัดการคำทั้งหมด ในขณะที่ overflow-wrap จะทำงานเฉพาะเมื่อคำมีความยาวเกินความกว้างของคอนเทนเนอร์ ตัวอย่างเช่น word-break: break-all; จะแบ่งคำที่ตำแหน่งใดก็ได้ แม้คำจะไม่ยาวเกินไป ในขณะที่ overflow-wrap จะแบ่งคำเฉพาะเมื่อคำเกินขอบเขตของคอนเทนเนอร์
ความแตกต่างจาก white-space
คุณสมบัติ white-space ควบคุมวิธีการจัดการการตัดบรรทัดและช่องว่างในข้อความทั้งหมด แตกต่างจาก overflow-wrap ตรงที่ white-space กำหนดว่าการตัดบรรทัดและช่องว่างจะถูกเก็บรักษาไว้หรือไม่ แต่ไม่ส่งผลต่อการแบ่งคำโดยตรง
ตัวอย่างเช่น white-space: nowrap; ทำให้ข้อความทั้งหมดอยู่ในบรรทัดเดียวโดยไม่มีการแบ่งบรรทัด ในทางกลับกัน overflow-wrap จะควบคุมการแบ่งบรรทัดของข้อความ
กรณีการใช้งานในทางปฏิบัติ
overflow-wrap มีประโยชน์อย่างยิ่งในสถานการณ์ต่อไปนี้:
- แสดง URL: ป้องกันปัญหาการจัดรูปแบบเมื่อแสดง URL ที่ยาว
- คำศัพท์ทางเทคนิค: จัดการกรณีที่คำภาษาอังกฤษยาวหรือคำศัพท์ทางเทคนิคเกินความกว้างของคอนเทนเนอร์
- การออกแบบที่ตอบสนอง: ทำให้มั่นใจได้ว่าข้อความยาวจะไม่ทำให้การจัดรูปแบบเสียหาย แม้ในหน้าจอขนาดเล็ก
สมบัติ quotes
1q {
2 quotes: "(" ")" "[" "]";
3}สมบัติ quotes ใช้เพื่อปรับแต่งเครื่องหมายคำพูด โดยปกติ เครื่องหมายคำพูดจะถูกเพิ่มโดยอัตโนมัติเมื่อครอบเนื้อหาของแท็ก <blockquote> หรือ <q> แต่การใช้สมบัติ quotes จะช่วยให้คุณกำหนดเครื่องหมายคำพูดเองได้
ในตัวอย่างนี้ จะใช้วงเล็บ ((, )) เป็นเครื่องหมายคำพูดชั้นนอก นอกจากนี้ เครื่องหมายคำพูดที่ซ้อนกันถูกแทนด้วยวงเล็บเหลี่ยม ([, ])
ไวยากรณ์
1element {
2 quotes: [opening-quote closing-quote] [, opening-quote closing-quote] ...;
3}สมบัติ quotes สามารถกำหนดค่าดังนี้:
none: จะไม่แสดงเครื่องหมายคำพูด- ชุดของเครื่องหมายคำพูด: กำหนดเครื่องหมายคำพูดเปิดและปิด ชุดแรกแทนเครื่องหมายคำพูดชั้นนอก ในขณะที่ชุดถัดไปใช้สำหรับคำพูดซ้อนกัน
จุดเด่นของ quotes
สมบัติ quotes เป็นสมบัติที่มีประโยชน์สำหรับการปรับแต่งเครื่องหมายคำพูดที่ใช้ในข้อความคำพูด โดยการตั้งค่าเครื่องหมายคำพูดที่เหมาะสมตามการออกแบบและภาษา คุณสามารถสร้างการนำเสนอหน้าที่หรูหรายิ่งขึ้น การใช้สมบัติ quotes ให้ประโยชน์ดังนี้:
- ปรับแต่งเครื่องหมายคำพูด: คุณสามารถเปลี่ยนรูปร่างเครื่องหมายคำพูดเริ่มต้นหรือกำหนดเครื่องหมายคำพูดที่เข้ากับการออกแบบเฉพาะ
- รองรับคำพูดซ้อน: คุณสามารถใช้ชุดเครื่องหมายคำพูดที่แตกต่างกันสำหรับคำพูดซ้อน
- ปรับแต่งได้ตามประเทศและภาษา: สามารถใช้สไตล์เครื่องหมายคำพูดที่แตกต่างกันได้ง่ายตามภาษาและประเทศ ซึ่งมีประโยชน์สำหรับเว็บไซต์นานาชาติ
สมบัติ 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}-
สมบัติ
user-selectเป็นสมบัติ CSS ที่ใช้ควบคุมว่าผู้ใช้สามารถเลือกข้อความได้หรือไม่ ด้วยการใช้สมบัตินี้ คุณสามารถป้องกันข้อความจากการถูกคัดลอกในองค์ประกอบเฉพาะหรือทั่วทั้งหน้า หรือในทางกลับกันสามารถทำให้เลือกได้ หากคุณระบุค่าallสำหรับคุณสมบัติuser-selectองค์ประกอบทั้งหมดจะถูกเลือกในครั้งเดียว ตัวอย่างเช่น เมื่อผู้ใช้คลิกที่ช่องข้อความหรือย่อหน้า องค์ประกอบทั้งหมดจะถูกเลือกในทันที -
สามารถใช้สำหรับการเลือกชุดคำสั่งโค้ดแบบกลุ่มได้
-
ในตัวอย่างนี้ ข้อความในย่อหน้าแรกสามารถเลือกได้ แต่ข้อความในย่อหน้าที่สองไม่สามารถเลือกได้ ในคลาส
select-allคุณสมบัติuser-selectถูกตั้งค่าเป็นallทำให้องค์ประกอบทั้งหมดสามารถเลือกได้ในทันที
ไวยากรณ์
1element {
2 user-select: auto | none | text | all | contain;
3}คุณสมบัติ user-select สามารถกำหนดค่าได้ตามตัวเลือกดังต่อไปนี้:
auto: ใช้พฤติกรรมเริ่มต้นของเบราว์เซอร์ การเลือกข้อความจะได้รับอนุญาตในองค์ประกอบส่วนใหญ่ แต่บางองค์ประกอบแบบโต้ตอบ เช่น ปุ่มและลิงก์ อาจถูกจำกัดnone: การเลือกข้อความถูกปิดใช้งานอย่างสมบูรณ์ ผู้ใช้จะไม่สามารถเลือกข้อความภายในองค์ประกอบนั้นได้text: อนุญาตให้เลือกเฉพาะข้อความภายในองค์ประกอบนั้นall: องค์ประกอบทั้งหมดจะถูกเลือกในทันที แทนที่จะเลือกบางส่วน องค์ประกอบทั้งหมดจะถูกเลือกเป็นหน่วยเดียวกันcontain: รองรับเฉพาะบางเบราว์เซอร์เท่านั้น อนุญาตให้เลือกเฉพาะองค์ประกอบที่ตำแหน่งที่คลิก
เบราว์เซอร์ที่รองรับ
คุณสมบัติ user-select รองรับในเบราว์เซอร์สมัยใหม่ส่วนใหญ่ อย่างไรก็ตาม เบราว์เซอร์บางตัวอาจต้องใช้คำนำหน้าของผู้ผลิต เช่น -webkit-user-select
- Chrome: รองรับ
- Firefox: รองรับ
- Safari: รองรับ (ต้องใช้คำนำหน้า
-webkit-) - Edge: รองรับ
- Internet Explorer: ไม่รองรับ
กรณีการใช้งานหลัก
คุณสมบัติ user-select มีข้อได้เปรียบดังต่อไปนี้
- องค์ประกอบ UI: ปิดการเลือกข้อความเพื่อหลีกเลี่ยงการรบกวนการคลิกหรือการลาก
- ป้องกันการคัดลอกข้อความ: ป้องกันการเลือกและคัดลอกข้อความในบางองค์ประกอบ
- ฟอร์มและองค์ประกอบที่โต้ตอบได้: นำไปใช้กับองค์ประกอบแบบโต้ตอบที่ไม่จำเป็นต้องเลือกข้อความเพื่อเพิ่มประสบการณ์ของผู้ใช้
สรุป
คุณสมบัติ user-select เป็นคุณสมบัติ CSS ที่มีประโยชน์ที่ช่วยให้สามารถควบคุมการเลือกข้อความบนเว็บเพจได้อย่างยืดหยุ่น สามารถป้องกันไม่ให้ผู้ใช้เลือกข้อความที่ไม่จำเป็นโดยไม่ตั้งใจ หรืออนุญาตให้พวกเขาเลือกทุกอย่างในคราวเดียวเพื่อรองรับการโต้ตอบที่หลากหลาย
คุณสมบัติ 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}- คุณสมบัติ
tab-sizeใช้สำหรับปรับแต่งช่องว่างสำหรับตัวอักษรแท็บ ตามค่าเริ่มต้น ความกว้างของแท็บมักถูกตั้งไว้ที่ 8 ช่องว่าง แต่สามารถปรับเปลี่ยนได้ตามต้องการโดยใช้คุณสมบัติtab-size
ไวยากรณ์
1element {
2 tab-size: length | number;
3}คุณสมบัติ tab-size สามารถรองรับค่าประเภทต่าง ๆ ต่อไปนี้
number: กำหนดความกว้างของตัวอักษรแท็บในแง่ของจำนวนอักขระ คุณสามารถกำหนดได้ทั้งตัวเลขจำนวนเต็มหรือตัวเลขทศนิยมlength: กำหนดความกว้างของตัวอักษรแท็บโดยใช้หน่วยความยาว (เช่น px, em)
หมายเหตุ
-
คุณสมบัติ
tab-sizeมักใช้ร่วมกับฟอนต์แบบ monospace เมื่อใช้ร่วมกับฟอนต์แบบ proportional ความกว้างของแท็บอาจไม่สม่ำเสมอ -
เมื่อกำหนดจำนวนอักขระ ควรระวังการปรับขนาดในอุปกรณ์ที่แตกต่างกัน
สรุป
การใช้คุณสมบัติ tab-size ช่วยเพิ่มความยืดหยุ่นในการแสดงโค้ดหรือตัวอักษรแท็บ ในฐานะนักพัฒนา การตั้งค่าความกว้างของแท็บอย่างเหมาะสมช่วยให้โค้ดอ่านง่ายขึ้นและการออกแบบสอดคล้องกัน
คุณสมบัติ 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}- คุณสมบัติ
text-indentใช้สำหรับเว้นระยะบรรทัดแรกของข้อความในองค์ประกอบแบบบล็อกด้วยระยะที่กำหนด คุณสมบัตินี้ทำให้คุณสามารถปรับแต่งเฉพาะบรรทัดแรกของย่อหน้าได้
ไวยากรณ์
1element {
2 text-indent: length | percentage;
3}คุณสมบัติ text-indent สามารถรองรับค่าประเภทต่าง ๆ ต่อไปนี้
length: กำหนดการเว้นระยะโดยใช้หน่วยความยาว (เช่น px, em)percentage: กำหนดการเว้นระยะเป็นเปอร์เซ็นต์ตามความกว้างขององค์ประกอบที่เป็น container
หมายเหตุ
text-indentใช้ได้เฉพาะกับองค์ประกอบแบบบล็อก ไม่มีผลต่อองค์ประกอบแบบอินไลน์
สรุป
คุณสมบัติ text-indent เป็นเครื่องมือที่ง่ายแต่ทรงพลังสำหรับการออกแบบข้อความให้อ่านง่าย โดยการเรียนรู้พื้นฐานและเข้าใจการใช้งานขั้นสูงและสิ่งที่ต้องพิจารณา คุณสามารถออกแบบสไตล์ได้อย่างมีประสิทธิภาพมากขึ้น
คุณสามารถติดตามบทความข้างต้นโดยใช้ Visual Studio Code บนช่อง YouTube ของเรา กรุณาตรวจสอบช่อง YouTube ด้วย