Propriétés CSS pour l'affichage de code et les citations
Cet article explique les propriétés CSS liées à l'affichage de code et aux citations.
Vous pouvez découvrir les propriétés CSS liées à l'affichage du code et aux citations, comme quotes et user-select, y compris leurs cas d'utilisation et comment les écrire.
YouTube Video
HTML pour l'aperçu
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>Propriétés CSS pour l'affichage de code et les citations
Propriété 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}La propriété white-space est une propriété CSS qui spécifie la manière dont les espaces et les sauts de ligne sont gérés à l'intérieur d'un élément. Par défaut, l'HTML traite plusieurs espaces comme un seul espace, mais la propriété white-space vous permet de modifier ce comportement.
Valeurs principales de white-space
normalest la valeur par défaut, où plusieurs espaces sont réduits en un seul et les lignes se coupent automatiquement.nowrapréduit les espaces en un seul mais empêche les sauts de ligne. Le contenu s'affiche sur une seule ligne.preconserve les espaces et les sauts de ligne tels quels. Les lignes ne sont pas coupées.pre-wrapconserve les espaces et les sauts de ligne tout en permettant le retour automatique à la ligne.pre-lineréduit les espaces mais conserve les sauts de ligne, tout en permettant le retour automatique à la ligne.break-spacesconserve les espaces et les sauts de ligne, tout en permettant des coupures au niveau des mots longs ou des espaces.
Propriété 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}La propriété overflow-wrap, anciennement appelée word-wrap, définit la manière dont les mots sont gérés lorsqu'ils dépassent la largeur du conteneur. En utilisant cette propriété, vous pouvez correctement couper les mots pour empêcher le texte de déborder et de casser la mise en page.
Dans cet exemple, avec normal, les mots longs peuvent dépasser le conteneur et entraîner un défilement horizontal, mais break-word force les mots longs à se couper.
Valeurs de la propriété
overflow-wrap dispose principalement de deux valeurs :.
-
normalnormalest la valeur par défaut, où le navigateur suit les règles standards de coupure de mots. Normalement, les mots se coupent uniquement aux points cassables tels que les espaces ou les traits d'union. Si un mot est extrêmement long, il peut dépasser la largeur du conteneur et casser la mise en page. -
break-wordbreak-wordforce un saut de ligne si nécessaire, coupant le texte à la ligne suivante quelle que soit la longueur du mot. Cela aide à éviter que la disposition du conteneur ne se casse à cause de mots trop longs.Lorsque
break-wordest spécifié, les mots sont coupés même dans des endroits sans espaces ni traits d'union pour tenir dans la largeur de l'écran. Cela est particulièrement utile pour les URL ou les mots très longs.
Différences entre overflow-wrap et d'autres propriétés
Les propriétés similaires à overflow-wrap incluent word-break et white-space.
Différence par rapport à word-break
word-break définit comment les mots entiers sont gérés, tandis que overflow-wrap déclenche un retour à la ligne uniquement lorsqu'un mot dépasse la largeur du conteneur. Par exemple, word-break: break-all; coupe les mots à n'importe quelle position, même s'ils ne sont pas longs, tandis que overflow-wrap ne coupe les mots que lorsqu'ils dépassent le conteneur.
Différence par rapport à white-space
La propriété white-space contrôle comment les retours à la ligne et les espaces sont gérés dans tout le texte. Contrairement à overflow-wrap, white-space définit si les retours à la ligne et les espaces sont conservés, mais n'affecte pas directement le retour à la ligne des mots.
Par exemple, white-space: nowrap; garantit que tout le texte reste sur une seule ligne sans retour à la ligne. En revanche, overflow-wrap contrôle le retour à la ligne du texte.
Cas pratiques d'utilisation
overflow-wrap est particulièrement utile dans les situations suivantes :.
- Affichage des URL : Empêche les problèmes de mise en page lors de l'affichage d'URL longues.
- Termes techniques : Gère les cas où des mots anglais continus ou des termes techniques dépassent la largeur du conteneur.
- Conception adaptée : Garantit que le texte long ne casse pas la mise en page, même sur des petits écrans.
Propriété quotes
1q {
2 quotes: "(" ")" "[" "]";
3}La propriété quotes est utilisée pour personnaliser les guillemets. Généralement, les guillemets sont automatiquement insérés lors de l'encadrement du contenu des éléments <blockquote> ou <q>, mais l'utilisation de la propriété quotes permet de spécifier des guillemets personnalisés.
Dans cet exemple, les parenthèses ((, )) sont utilisées comme guillemets extérieurs. De plus, les guillemets imbriqués sont représentés par des crochets ([, ]).
Syntaxe
1element {
2 quotes: [opening-quote closing-quote] [, opening-quote closing-quote] ...;
3}La propriété quotes peut être spécifiée avec des valeurs comme celles-ci :.
none: Aucun guillemet ne sera affiché.- Une série de guillemets : Spécifiez les guillemets d'ouverture et de fermeture. Le premier ensemble représente les guillemets extérieurs, tandis que les ensembles suivants sont pour les citations imbriquées.
Points essentiels de la propriété quotes
La propriété quotes est utile pour personnaliser les guillemets utilisés dans les citations de texte. En définissant des guillemets appropriés en fonction du design et de la langue, vous pouvez obtenir une présentation de page plus sophistiquée. L'utilisation de la propriété quotes offre des avantages tels que les suivants :.
- Personnalisez les guillemets : Vous pouvez modifier la forme par défaut des guillemets ou définir des guillemets adaptés à un design spécifique.
- Prend en charge les citations imbriquées : Vous pouvez appliquer différents ensembles de guillemets pour les citations imbriquées.
- Personnalisable par pays et langue : Appliquer facilement différents styles de guillemets en fonction de la langue ou du pays, ce qui est utile pour les sites web internationaux.
Propriété 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}-
La propriété
user-selectest une propriété CSS utilisée pour contrôler si les utilisateurs peuvent sélectionner du texte. En utilisant cette propriété, vous pouvez empêcher le texte d'être copié dans des éléments spécifiques ou sur l'ensemble de la page, ou au contraire le rendre sélectionnable. Si vous spécifiezallpour la propriétéuser-select, l'intégralité de l'élément est sélectionnée d'un coup. Par exemple, lorsqu'un utilisateur clique sur un champ de texte ou un paragraphe, l'intégralité de l'élément est sélectionnée d'un coup. -
Il peut également être utilisé pour la sélection en masse de code source.
-
Dans cet exemple, le texte du premier paragraphe est sélectionnable, mais pas celui du deuxième paragraphe. Dans la classe
select-all, la propriétéuser-selectest définie surall, ce qui permet de sélectionner l'intégralité de l'élément d'un coup.
Syntaxe
1element {
2 user-select: auto | none | text | all | contain;
3}La propriété user-select peut être spécifiée avec les valeurs suivantes :.
auto: Utilisez le comportement par défaut du navigateur. La sélection de texte est autorisée sur la plupart des éléments, mais peut être restreinte sur certains éléments interactifs comme les boutons et les liens.none: La sélection de texte est complètement désactivée. Les utilisateurs ne pourront pas sélectionner le texte à l'intérieur de cet élément.text: Permet de sélectionner uniquement le texte à l'intérieur de l'élément.all: L'intégralité de l'élément est sélectionnée d'un coup. Au lieu d'une sélection partielle, l'intégralité de l'élément est sélectionnée comme un tout.contain: Pris en charge uniquement par certains navigateurs. Permet de sélectionner uniquement l'élément situé à l'emplacement cliqué.
Navigateurs pris en charge
La propriété user-select est prise en charge par la plupart des navigateurs modernes. Cependant, certains navigateurs peuvent nécessiter des préfixes spécifiques comme -webkit-user-select.
- Chrome : Pris en charge
- Firefox : Pris en charge
- Safari : Pris en charge (nécessite le préfixe
-webkit-). - Edge : Pris en charge
- Internet Explorer : Non pris en charge
Principaux cas d'utilisation
La propriété user-select offre les avantages suivants :.
- Éléments de l'interface utilisateur : Désactiver la sélection de texte pour éviter d'interférer avec les opérations de clic ou de glisser-déposer.
- Empêcher la copie de texte : Empêcher la sélection et la copie de texte sur certains éléments.
- Formulaires et éléments interactifs : Appliquer aux éléments interactifs où la sélection de texte est inutile pour améliorer l'expérience utilisateur.
Résumé
La propriété user-select est une propriété CSS utile qui permet un contrôle flexible de la sélection de texte sur une page web. Elle peut empêcher les utilisateurs de sélectionner accidentellement du texte inutile ou leur permettre de tout sélectionner en une seule fois, pour s'adapter à diverses interactions.
La propriété 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}- La propriété
tab-sizeest utilisée pour personnaliser l'espace réservé aux caractères de tabulation. Par défaut, la largeur de la tabulation est généralement définie sur 8 espaces, mais elle peut être ajustée à n'importe quelle valeur en utilisant la propriététab-size.
Syntaxe
1element {
2 tab-size: length | number;
3}La propriété tab-size peut accepter les types de valeurs suivants.
number: Spécifie la largeur du caractère de tabulation en termes de nombre de caractères. Vous pouvez spécifier soit un entier, soit un nombre décimal.length: Spécifie la largeur du caractère de tabulation en utilisant des unités de longueur (ex. : px, em).
Notes
-
La propriété
tab-sizeest généralement utilisée avec des polices à espacement fixe (monospace). Lorsqu'elle est utilisée avec des polices proportionnelles, la largeur de la tabulation peut devenir irrégulière. -
Lorsque vous spécifiez le nombre de caractères, tenez compte du redimensionnement sur différents appareils.
Résumé
L'utilisation de la propriété tab-size améliore la flexibilité lors de l'affichage de code ou de caractères de tabulation. En tant que développeur, une largeur de tabulation bien définie garantit la lisibilité du code et la cohérence du design.
La propriété 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}- La propriété
text-indentest utilisée pour indenter la première ligne de texte dans un élément de bloc à une distance spécifiée. Cette propriété permet de styliser uniquement la première ligne d'un paragraphe.
Syntaxe
1element {
2 text-indent: length | percentage;
3}La propriété text-indent peut accepter les types de valeurs suivants.
length: Spécifie le retrait en utilisant des unités de longueur (ex. : px, em).percentage: Spécifie le retrait en pourcentage basé sur la largeur de l'élément conteneur.
Notes
text-indents'applique uniquement aux éléments de type bloc. Il n'a aucun effet sur les éléments en ligne.
Résumé
La propriété text-indent est un outil simple mais puissant pour créer des conceptions de texte lisibles. En maîtrisant les bases et en comprenant les cas d'utilisation avancés et les considérations, vous pouvez styliser plus efficacement.
Vous pouvez suivre l'article ci-dessus avec Visual Studio Code sur notre chaîne YouTube. Veuillez également consulter la chaîne YouTube.