Articles
CSS 簡介
用於代碼顯示和引用的CSS屬性

用於代碼顯示和引用的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 主要有兩個值：。

  • normal

    normal 是默認值，瀏覽器遵循標準的單詞換行規則。通常，單詞僅在可斷點（如空格或連字符）處換行。如果一個單詞非常長，可能會超出容器的寬度並破壞佈局。

  • break-word break-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 在以下情況中特別有用：。

  1. 顯示 URL：防止顯示長 URL 時出現佈局問題。
  2. 技術術語：處理連續的英文單詞或技術術語超出容器寬度的情況。
  3. 響應式設計：確保長文本即使在小屏幕上也不會破壞佈局。

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 屬性。通過使用此屬性，可以防止文本在特定元素或整個頁面中被選取，也可以相反地使文本變得可選取。如果將 user-select 屬性設置為 all，整個元素將一次性被選中。例如，當使用者點擊文本欄或段落時，整個元素將一次性被選中。

  • 它也可以用於批量選擇源代碼。

  • 在此範例中，第一段的文本可選取，但第二段的文本無法選取。在 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 屬性用於自定義製表符號（Tab）的間距。預設情況下，Tab 寬度通常設定為 8 個字元空間，但可以使用 tab-size 屬性將其調整為任意值。

語法 

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

tab-size 屬性可以接受以下類型的值。

  • number：以字元數量來定義 Tab 符號的寬度。你可以指定整數或小數。
  • length：使用長度單位（例如：px、em）來定義 Tab 符號的寬度。

注意事項

  • tab-size 屬性通常與等寬字體一起使用。當與比例字體一起使用時，Tab 的寬度可能變得不均勻。

  • 當定義字元數時，應注意在不同設備上的比例縮放。

總結

使用 tab-size 屬性在顯示代碼或 Tab 符號時提高了靈活性。作為開發者，正確設定 Tab 寬度可以確保代碼的可讀性和設計的一致性。

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：根據容器元素的寬度，以百分比的形式定義縮排。

注意事項

  • text-indent 僅適用於區塊元素。對行內元素無效。

總結

text-indent 屬性是一個簡單但強大的工具，用於創建易於閱讀的文本設計。通過掌握基礎知識並了解進階的用例和考慮因素，您可以更有效地進行樣式設計。

您可以在我們的 YouTube 頻道上使用 Visual Studio Code 來跟隨上述文章一起學習。 請也查看我們的 YouTube 頻道。

YouTube Video

與文字間距有關的CSS屬性與盒模型相關的CSS屬性