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 属性提供以下优点。

  • 用户界面元素：禁用文本选择以避免干扰点击或拖动操作。
  • 防止文本复制：防止在某些元素上选择和复制文本。
  • 表单和交互元素：将其应用于不需要文本选择的交互元素，以提升用户体验。

总结

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属性