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像素。
  • 字母和单词间距: 减少单词和字母间距的一个例子。与正常相比，单词间距减少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属性