CSS-Eigenschaften für die Anzeige von Code und Zitaten
Dieser Artikel erklärt CSS-Eigenschaften, die mit der Anzeige von Code und Zitaten zusammenhängen.
Sie können mehr über CSS-Eigenschaften im Zusammenhang mit der Codeanzeige und Zitaten erfahren, wie zum Beispiel quotes und user-select, einschließlich ihrer Anwendungsfälle und wie sie geschrieben werden.
YouTube Video
HTML zur Vorschau
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-Eigenschaften für die Anzeige von Code und Zitaten
white-space-Eigenschaft
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}Die white-space-Eigenschaft ist eine CSS-Eigenschaft, die festlegt, wie Leerzeichen und Zeilenumbrüche innerhalb eines Elements behandelt werden. Standardmäßig behandelt HTML mehrere Leerzeichen als ein einziges, aber mit der Eigenschaft white-space können Sie dieses Verhalten ändern.
Hauptwerte der white-space-Eigenschaft
normalist der Standardwert, bei dem mehrere Leerzeichen zu einem zusammengefasst werden und Zeilen automatisch umgebrochen werden.nowrapfasst Leerzeichen zu einem zusammen, verhindert jedoch Zeilenumbrüche. Der Inhalt wird in einer einzigen Zeile angezeigt.prebewahrt Leerzeichen und Zeilenumbrüche in ihrer ursprünglichen Form. Ein Zeilenumbruch tritt nicht auf.pre-wrapbewahrt Leerzeichen und Zeilenumbrüche und erlaubt gleichzeitig Zeilenumbrüche.pre-linefasst Leerzeichen zusammen, bewahrt Zeilenumbrüche und erlaubt Zeilenumbrüche.break-spacesbewahrt Leerzeichen und Zeilenumbrüche und erlaubt Umbrüche bei langen Wörtern oder Leerzeichen.
overflow-wrap-Eigenschaft
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}Die overflow-wrap-Eigenschaft, früher bekannt als word-wrap, definiert, wie Wörter behandelt werden, wenn sie die Breite des Containers überschreiten. Mit dieser Eigenschaft können Sie Wörter richtig umbrechen, um zu verhindern, dass der Text überläuft und das Layout beschädigt wird.
In diesem Beispiel können bei normal lange Wörter den Container überlaufen und horizontales Scrollen verursachen, während break-word lange Wörter zwingt, umzubrechen.
Eigenschaftswerte
overflow-wrap hat hauptsächlich zwei Werte:.
-
normalnormalist der Standardwert, bei dem der Browser den Standardregeln für Wortumbrüche folgt. Normalerweise erfolgt der Umbruch nur an Trennstellen wie Leerzeichen oder Bindestrichen. Wenn ein Wort extrem lang ist, kann es die Containerbreite überschreiten und das Layout zerstören. -
break-wordbreak-worderzwingt bei Bedarf einen Zeilenumbruch, wobei der Text unabhängig von der Wortlänge in die nächste Zeile umbricht. Dies hilft zu verhindern, dass das Layout des Containers durch lange Wörter zerstört wird.Wenn
break-wordangegeben ist, werden Wörter auch an Stellen ohne Leerzeichen oder Bindestriche umgebrochen, um in die Bildschirmbreite zu passen. Dies ist besonders nützlich für URLs oder sehr lange Wörter.
Unterschiede zwischen overflow-wrap und anderen Eigenschaften
Eigenschaften, die overflow-wrap ähnlich sind, umfassen word-break und white-space.
Unterschied zu word-break
word-break definiert, wie ganze Wörter behandelt werden, während overflow-wrap das Umbruchverhalten nur auslöst, wenn ein Wort die Containerbreite überschreitet. Zum Beispiel bricht word-break: break-all; Wörter an jeder Position, auch wenn sie nicht lang sind, während overflow-wrap Wörter nur umbricht, wenn sie die Containerbreite überschreiten.
Unterschied zu white-space
Die Eigenschaft white-space steuert, wie Zeilenumbrüche und Leerzeichen im gesamten Text behandelt werden. Im Gegensatz zu overflow-wrap definiert white-space, ob Zeilenumbrüche und Leerzeichen beibehalten werden, beeinflusst aber nicht direkt den Wortumbruch.
Zum Beispiel sorgt white-space: nowrap; dafür, dass der gesamte Text in einer einzelnen Zeile bleibt, ohne umgebrochen zu werden. Andererseits steuert overflow-wrap den Textumbruch.
Praktische Anwendungsfälle
overflow-wrap ist besonders in den folgenden Situationen nützlich:.
- Anzeigen von URLs: Verhindert Layoutprobleme beim Anzeigen langer URLs.
- Fachbegriffe: Behandelt Fälle, in denen kontinuierliche englische Wörter oder Fachbegriffe die Containerbreite überschreiten.
- Responsives Design: Stellt sicher, dass langer Text das Layout auch auf kleinen Bildschirmen nicht zerstört.
quotes-Eigenschaft
1q {
2 quotes: "(" ")" "[" "]";
3}Mit der quotes-Eigenschaft können Anführungszeichen angepasst werden. Normalerweise werden Anführungszeichen automatisch eingefügt, wenn der Inhalt von <blockquote>- oder <q>-Elementen umschlossen wird. Mit der quotes-Eigenschaft können jedoch benutzerdefinierte Anführungszeichen festgelegt werden.
In diesem Beispiel werden Klammern ((, )) als äußere Anführungszeichen verwendet. Zusätzlich werden verschachtelte Anführungszeichen durch eckige Klammern ([, ]) dargestellt.
Syntax
1element {
2 quotes: [opening-quote closing-quote] [, opening-quote closing-quote] ...;
3}Die quotes-Eigenschaft kann mit Werten wie den folgenden angegeben werden:.
none: Es werden keine Anführungszeichen angezeigt.- Eine Reihe von Anführungszeichen: Geben Sie die öffnenden und schließenden Anführungszeichen an. Das erste Paar stellt die äußeren Anführungszeichen dar, während die folgenden Paare für verschachtelte Zitate verwendet werden.
Wichtige Punkte zur quotes-Eigenschaft
Die quotes-Eigenschaft ist nützlich, um Anführungszeichen in Textzitaten anzupassen. Durch die Auswahl passender Anführungszeichen entsprechend dem Design und der Sprache können Sie eine professionellere Seitenpräsentation erzielen. Die Verwendung der quotes-Eigenschaft bietet folgende Vorteile:.
- Anpassen von Anführungszeichen: Sie können die Standardform von Anführungszeichen ändern oder speziell gestaltete Anführungszeichen festlegen.
- Unterstützt verschachtelte Zitate: Sie können unterschiedliche Paare von Anführungszeichen für verschachtelte Zitate anwenden.
- Anpassbar nach Land und Sprache: Unterschiedliche Stile von Anführungszeichen können je nach Sprache oder Land leicht angewendet werden, was für internationale Websites nützlich ist.
user-select-Eigenschaft
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}-
Die
user-select-Eigenschaft ist eine CSS-Eigenschaft, mit der gesteuert wird, ob Benutzer Text auswählen können. Durch die Verwendung dieser Eigenschaft können Sie verhindern, dass Text in bestimmten Elementen oder auf der gesamten Seite kopiert wird, oder, umgekehrt, diesen auswählbar machen. Wenn Sieallfür die Eigenschaftuser-selectangeben, wird das gesamte Element auf einmal ausgewählt. Wenn ein Nutzer beispielsweise auf ein Textfeld oder einen Absatz klickt, wird das gesamte Element auf einmal ausgewählt. -
Es kann auch für die vollständige Auswahl von Quellcode verwendet werden.
-
In diesem Beispiel ist der Text des ersten Absatzes auswählbar, der Text des zweiten Absatzes jedoch nicht. In der Klasse
select-allist die Eigenschaftuser-selectaufallgesetzt, wodurch das gesamte Element auf einmal ausgewählt werden kann.
Syntax
1element {
2 user-select: auto | none | text | all | contain;
3}Die Eigenschaft user-select kann mit den folgenden Werten angegeben werden:.
auto: Verwendet das Standardverhalten des Browsers. Die Textauswahl ist bei den meisten Elementen erlaubt, kann jedoch bei einigen interaktiven Elementen wie Schaltflächen und Links eingeschränkt sein.none: Die Textauswahl ist vollständig deaktiviert. Benutzer können keinen Text innerhalb dieses Elements auswählen.text: Erlaubt nur die Auswahl des Textes innerhalb des Elements.all: Das gesamte Element wird auf einmal ausgewählt. Anstatt einer teilweisen Auswahl wird das gesamte Element als Ganzes ausgewählt.contain: Nur von einigen Browsern unterstützt. Erlaubt nur die Auswahl des Elements an der geklickten Position.
Unterstützte Browser
Die Eigenschaft user-select wird von den meisten modernen Browsern unterstützt. Einige Browser erfordern jedoch Anbieter-Präfixe wie -webkit-user-select.
- Chrome: Unterstützt
- Firefox: Unterstützt
- Safari: Unterstützt (erfordert das Präfix
-webkit-). - Edge: Unterstützt
- Internet Explorer: Nicht unterstützt
Hauptanwendungsfälle
Die Eigenschaft user-select bietet die folgenden Vorteile:.
- UI-Elemente: Textauswahl deaktivieren, um Klick- oder Ziehvorgänge nicht zu beeinträchtigen.
- Verhindern des Kopierens von Text: Verhindern Sie die Textauswahl und das Kopieren bei bestimmten Elementen.
- Formulare und interaktive Elemente: Wenden Sie es auf interaktive Elemente an, bei denen die Textauswahl unnötig ist, um die Benutzererfahrung zu verbessern.
Zusammenfassung
Die Eigenschaft user-select ist eine nützliche CSS-Eigenschaft, die eine flexible Steuerung der Textauswahl auf einer Webseite ermöglicht. Es kann verhindern, dass Benutzer versehentlich unnötigen Text auswählen, oder es ihnen ermöglichen, alles auf einmal auszuwählen, um verschiedene Interaktionen zu berücksichtigen.
Die Eigenschaft 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}- Die Eigenschaft
tab-sizewird verwendet, um den Abstand für Tabulatorzeichen anzupassen. Standardmäßig ist die Tabulatorbreite normalerweise auf 8 Leerzeichen eingestellt, kann jedoch mithilfe der Eigenschafttab-sizeauf jeden Wert eingestellt werden.
Syntax
1element {
2 tab-size: length | number;
3}Die Eigenschaft tab-size kann die folgenden Arten von Werten akzeptieren.
number: Gibt die Breite des Tabulatorzeichens in Zeichenanzahl an. Sie können entweder eine ganze Zahl oder eine Dezimalzahl angeben.length: Gibt die Breite des Tabulatorzeichens unter Verwendung von Längeneinheiten an (z. B. px, em).
Notizen
-
Die Eigenschaft
tab-sizewird typischerweise mit Monospace-Schriftarten verwendet. Bei der Verwendung mit proportionalen Schriftarten kann die Tabulatorbreite ungleichmäßig werden. -
Achten Sie bei der Angabe der Zeichenanzahl auf die Skalierung auf verschiedenen Geräten.
Zusammenfassung
Die Verwendung der Eigenschaft tab-size erhöht die Flexibilität beim Anzeigen von Code oder Tabulatorzeichen. Als Entwickler sorgt die korrekte Einstellung der Tabulatorbreite für eine bessere Lesbarkeit des Codes und Konsistenz im Design.
Die Eigenschaft 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}- Die Eigenschaft
text-indentwird verwendet, um die erste Textzeile in einem Blockelement um einen bestimmten Abstand einzurücken. Diese Eigenschaft ermöglicht es Ihnen, nur die erste Zeile eines Absatzes zu gestalten.
Syntax
1element {
2 text-indent: length | percentage;
3}Die Eigenschaft text-indent kann die folgenden Arten von Werten akzeptieren.
length: Gibt die Einrückung mithilfe von Längeneinheiten an (z. B. px, em).percentage: Gibt die Einrückung als Prozentsatz basierend auf der Breite des Containerelements an.
Notizen
text-indentgilt nur für Blockelemente. Es hat keine Auswirkung auf Inline-Elemente.
Zusammenfassung
Die Eigenschaft text-indent ist ein einfaches, aber leistungsstarkes Werkzeug zur Erstellung von lesbaren Textlayouts. Wenn Sie die Grundlagen beherrschen und fortgeschrittene Anwendungsfälle sowie Überlegungen verstehen, können Sie effizienter gestalten.
Sie können den obigen Artikel mit Visual Studio Code auf unserem YouTube-Kanal verfolgen. Bitte schauen Sie sich auch den YouTube-Kanal an.