Articles
CSS 簡介
與文字間距有關的CSS屬性

與文字間距有關的CSS屬性

本文說明與文字間距相關的 CSS 屬性。

您可以學習如何使用以及撰寫像是 line-height 和 word-spacing 等屬性。

YouTube Video

建立用於預覽的 HTML

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>

版式設計（與文字邊距相關）

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 是一個用於設定行間距（行高）的 CSS 屬性。line-height 指定行與行之間的垂直間距，用於提升可讀性或作為設計的一部分來調整間距。

line-height 的主要用途

無單位數字 
1p {
2    line-height: 1.5; /* 1.5 times the font size */
3}
  • 指定相對於字型大小的高度。例如，設定 1.5 會將行高設定為字型大小的 1.5 倍。此方法對於響應式設計非常實用。
百分比 
1p {
2    line-height: 150%;
3}
  • 將行高設定為字型大小的百分比。例如，設定 150% 會將行高設定為字型大小的 150%。
固定值（px、em、rem 等） 
1p {
2    line-height: 20px;
3}
  • 以絕對單位指定行高。例如，您可以設定具體值如 20px，但在響應式設計中可能缺乏彈性。
normal 
1p {
2    line-height: normal;
3}
  • 指定 normal 會套用瀏覽器的預設行間距設定。通常約為字型大小的 1.2 至 1.4 倍。

使用line-height的例子

可讀段落
  • 建議將 line-height 設定為大約 1.5 至 1.6 以提高可讀性。如果行間距太窄，文字看起來會擁擠難以閱讀；如果太寬，文字會顯得支離破碎。
標題設計
  • 對於標題和標題文字，字體較大時可以減少行間距。通常採用像 1.1 或 1.2 的設定。

總結

  • line-height 是改善文字可讀性和設計的重要屬性。
  • 使用相對值（數字或百分比）使其更容易適應響應式設計。
  • 對於具有大字體的標題和小字體的段落，為每個設定適當的行間距至關重要。

運用此屬性可以使文字外觀更具可讀性並提升其設計質量。

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 是一個用於調整字母之間間距（字間距）的 CSS 屬性。此屬性可用於美化文字設計、提升可讀性以及實現特定風格。

在本例中，設定內容如下。

  • normal：預設的字間距。這是一個由瀏覽器和字體決定的標準值。
  • 4px：字母間距加寬的例子。在每個字元之間增加4像素的間距。
  • -1px：字母間距縮小的例子。在每個字元之間減少1像素的間距。

如何使用letter-spacing

帶單位的值 
1p.increased {
2    letter-spacing: 2px;  /* Increase letter spacing by 2px */
3}
4p.decreased {
5    letter-spacing: -1em;  /* Decrease letter spacing by 1em */
6}
  • 設置正值將增加字母間距。
  • 設置負值將減少字母間距。
  • 單位通常為px（像素）或em。
默認：normal 
1p {
2    letter-spacing: normal;  /* Default letter spacing */
3}
  • 使用預設的字距。通常，應用由字體定義的標準字距。

letter-spacing用法範例

  • 提高可讀性：對於字號較小或過於緊湊的字體，可以通過增加 letter-spacing 來提高可讀性。
  • 設計調整：您可以調整字距來視覺上突出顯示設計元素，如標題或徽標。
  • 字元之間的調整：您可以在字元級別調整間距，而不是在單詞之間。letter-spacing 調整字元級別的間距，但可以使用 word-spacing 來擴大單詞之間的間距。
  • 設計平衡：如果增加字距過多，整體文本可能會顯得過於拉長。相反，如果減少過多，文本將變得擁擠且難以閱讀，因此保持適當的平衡很重要。

總結

  • letter-spacing 是調整字母間距的屬性，影響設計和可讀性。
  • 可以使用正值增加間距，使用負值減少間距。
  • 對於標題和特定設計元素非常有效，但須注意不要影響可讀性。

使用此屬性，您可以調整文本的外觀並實現美觀的設計。

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 是一個用來控制文字中單詞間距的CSS屬性。合理使用此屬性可以改善視覺平衡和文字的可讀性。word-spacing 在以排版為重點的設計和響應式設計情境中特別有用。

在本例中，設定內容如下。

  • normal：應用預設的單詞間距。這是瀏覽器的初始值。
  • 4px：增加單詞間距的範例。在每個單詞之間添加4像素的間距。
  • -1px：減少單詞間距的範例。將每個單詞之間的間距減少1像素。
  • word-and-letter-spacing：減少單詞和字母間距的範例。相比正常情況，將單詞間距減少0.1em，字母間距減少0.05em。

使用正值和負值

對 word-spacing 設置正值會擴大單詞間距。另一方面，使用負值會縮小單詞之間的間距。負值可以用於強調視覺效果，或為特定設計目的緊縮字母間距。

與letter-spacing的區別

word-spacing 是調整單詞間距的屬性，而 letter-spacing 是調整字母間距的屬性。通過結合這些屬性，可以更精確地控制整個文本的排版。

注意事項與最佳實踐

  • 過度間距調整：過度使用 word-spacing 可能會降低可讀性。特別是過大或過小的間距會對用戶造成壓力，因此進行適度調整很重要。
  • 響應式設計：使用 em 或 rem 指定相對值對於響應式設計非常有效，因為它能確保在不同屏幕尺寸上的正確顯示。
  • 標題樣式調整：通過加寬標題文本中單詞之間的間距，可以增加視覺強調。這可以幫助您明確內容層次結構，實現精緻的設計。

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 是一個 CSS 屬性，用於控制文本在超過容器寬度時的換行方式。通常瀏覽器會在單詞邊界進行斷行，但特定的設置可以在存在長單詞或 URL 時改善外觀和可讀性。

您可以為 word-break 屬性指定以下值。

  • normal

    normal 是預設值。當單詞超過容器寬度時，它會在單詞邊界斷行。此設置通常用於英語等語言，斷行不會出現在單詞中間。

  • break-all

    break-all 是一個允許在任何字符之後插入斷行的設置，以滿足需求。當包含長單詞或 URL 時，會在字符層級進行斷行以防止佈局中斷。

  • keep-all

    keep-all 是特別為亞洲語言（如日文、中文、韓文等）使用的設置。在此設置下，整個單詞被保留，且不會在單詞中間斷行。然而，對於以空格分隔的語言（如英語），會應用正常的單詞邊界斷行。

此範例展示了三種不同的 word-break 設置。使用 word-break-normal 時，整個單詞被保留，如果超過容器寬度，會在單詞邊界斷行。使用 word-break-break-all 時，即使在單詞中間也會斷行。word-break-keep-all 允許亞洲語言（如日文）自然斷行，並對英語進行單詞邊界斷行。

word-break 應用場景

行動設備與響應式設計 

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

在行動裝置上，螢幕寬度有限，這可能導致包含 URL 或長單詞的文本超出螢幕寬度。在這種情況下，應用 word-break: break-all; 可以在字符層級進行斷行以適應螢幕寬度，改善可讀性。

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}

  • hyphens 屬性用於 CSS 中，用於指定在分行文字時如何處理單詞的連字（用連字符拆分單詞）。適當設置此屬性可以改善文字的可讀性和外觀。當需要將長單詞換行時，連字特別有用。

  • 由於連字符規則因語言而異，此屬性取決於文本的語言環境。

語法 

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

hyphens 屬性可以設置為以下值：。

  • none：不應用連字。單詞通常只會在單詞的末尾換行。
  • manual：連字需要手動設置。在這種情況下，您需要在 HTML 中手動指定連字符的位置。例如，您可以使用 &shy;（軟連字符）。
  • auto：瀏覽器會自動在適當的位置應用連字符。在這種情況下，必須正確指定文檔的語言（lang 屬性）。

注意事項

  • 語言設置的重要性：當使用 hyphens: auto; 時，正確的連字需要 HTML 文檔的 lang 屬性被正確設置。
  • 字體依賴性：某些字體可能不適合使用連字。
  • 連字字典的使用：連字規則取決於瀏覽器使用的字典。因此，對於某些語言，它可能無法按預期工作。

總結

通過適當利用 hyphens 屬性，您可以顯著改善文本佈局。特別是在多語言網站和適合移動設備的設計中，適當使用 auto 和 manual 可以提升用戶體驗。

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

YouTube Video

與文本相關的CSS屬性用於代碼顯示和引用的CSS屬性