Proprietà CSS per la Visualizzazione del Codice e le Citazioni
Questo articolo spiega le proprietà CSS relative alla visualizzazione del codice e alle citazioni.
Puoi imparare le proprietà CSS relative alla visualizzazione del codice e alle citazioni, come quotes e user-select, inclusi i loro casi d'uso e come scriverli.
YouTube Video
HTML per Anteprima
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>Proprietà CSS per la Visualizzazione del Codice e le Citazioni
Proprietà 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 proprietà white-space è una proprietà CSS che specifica come vengono gestiti gli spazi bianchi e i ritorni a capo all'interno di un elemento. Di default, l'HTML tratta spazi multipli come un singolo spazio, ma la proprietà white-space ti consente di modificare questo comportamento.
Valori principali di white-space
normalè il valore predefinito, dove spazi multipli sono ridotti a uno solo e le righe si interrompono automaticamente.nowrapriduce gli spazi a uno solo ma impedisce i ritorni a capo. Il contenuto è visualizzato su una singola riga.prepreserva gli spazi bianchi e i ritorni a capo esattamente come sono. Il ritorno a capo non si verifica.pre-wrappreserva spazi bianchi e ritorni a capo consentendo anche l'interruzione di linea.pre-lineriduce gli spazi ma preserva i ritorni a capo, consentendo l'interruzione di linea.break-spacespreserva spazi e ritorni a capo, consentendo interruzioni su parole lunghe o spazi.
Proprietà 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 proprietà overflow-wrap, precedentemente nota come word-wrap, definisce come vengono gestite le parole quando superano la larghezza del contenitore. Usando questa proprietà, puoi gestire correttamente l'andata a capo delle parole per evitare che il testo trabocchi rompendo il layout.
In questo esempio, con normal, le parole lunghe possono traboccare dal contenitore causando lo scorrimento orizzontale, mentre break-word costringe le parole lunghe ad andare a capo.
Valori della proprietà
overflow-wrap ha principalmente due valori:.
-
normalnormalè il valore predefinito, in cui il browser segue le regole standard di interruzione delle parole. Normalmente, le parole vanno a capo solo in punti interruzione come spazi o trattini. Se una parola è estremamente lunga, potrebbe superare la larghezza del contenitore e rompere il layout. -
break-wordbreak-wordforza un'interruzione di riga, andando a capo indipendentemente dalla lunghezza della parola. Questo aiuta a prevenire che il layout del contenitore si rompa a causa di parole troppo lunghe.Quando viene specificato
break-word, le parole vanno a capo anche in punti senza spazi o trattini per adattarsi alla larghezza dello schermo. Questo è particolarmente utile per URL o parole molto lunghe.
Differenze tra overflow-wrap e altre proprietà
Proprietà simili a overflow-wrap includono word-break e white-space.
Differenza rispetto a word-break
word-break definisce come gestire le intere parole, mentre overflow-wrap attiva l'andata a capo solo quando una parola supera la larghezza del contenitore. Ad esempio, word-break: break-all; spezza le parole in qualsiasi posizione, anche se non sono lunghe, mentre overflow-wrap va a capo solo quando le parole superano il contenitore.
Differenza rispetto a white-space
La proprietà white-space controlla come vengono gestiti i ritorni a capo e gli spazi nell'intero testo. A differenza di overflow-wrap, white-space definisce se i ritorni a capo e gli spazi vengono preservati ma non influisce direttamente sull'andata a capo delle parole.
Ad esempio, white-space: nowrap; assicura che l'intero testo rimanga su una singola riga senza andare a capo. D'altra parte, overflow-wrap controlla l'andata a capo del testo.
Casi d'uso pratici
overflow-wrap è particolarmente utile nelle seguenti situazioni:.
- Visualizzazione di URL: Previene problemi di layout durante la visualizzazione di URL lunghi.
- Termini tecnici: Gestisce i casi in cui parole inglesi continue o termini tecnici superano la larghezza del contenitore.
- Design Reattivo: Garantisce che il testo lungo non rompa il layout anche su schermi piccoli.
proprietà quotes
1q {
2 quotes: "(" ")" "[" "]";
3}La proprietà quotes viene utilizzata per personalizzare le virgolette. Di solito, le virgolette vengono inserite automaticamente quando si racchiude il contenuto di elementi <blockquote> o <q>, ma utilizzando la proprietà quotes puoi specificare virgolette personalizzate.
In questo esempio, le parentesi tonde ((, )) sono utilizzate come virgolette esterne. Inoltre, le virgolette nidificate sono rappresentate da parentesi quadre ([, ]).
Sintassi
1element {
2 quotes: [opening-quote closing-quote] [, opening-quote closing-quote] ...;
3}La proprietà quotes può essere specificata con valori come i seguenti:.
none: Nessuna virgoletta verrà visualizzata.- Una serie di virgolette: Specifica le virgolette di apertura e di chiusura. Il primo set rappresenta le virgolette esterne, mentre i set successivi sono per le citazioni nidificate.
Punti principali di quotes
La proprietà quotes è una proprietà utile per personalizzare le virgolette usate nelle citazioni di testo. Impostando virgolette appropriate in base al design e alla lingua, puoi ottenere una presentazione della pagina più sofisticata. Utilizzare la proprietà quotes offre vantaggi come i seguenti:.
- Personalizza le virgolette: Puoi modificare la forma predefinita delle virgolette o impostarle in base a un design specifico.
- Supporta le citazioni annidate: Puoi applicare set diversi di virgolette per le citazioni annidate.
- Personalizzabile per paese e lingua: Applica facilmente stili diversi di virgolette a seconda della lingua o del paese, utile per siti web internazionali.
proprietà 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 proprietà
user-selectè una proprietà CSS utilizzata per controllare se gli utenti possono selezionare il testo. Utilizzando questa proprietà, puoi impedire che il testo venga copiato in specifici elementi o sull'intera pagina, oppure rendere il testo selezionabile. Se specifichiallper la proprietàuser-select, l'intero elemento viene selezionato in una sola volta. Ad esempio, quando un utente fa clic su un campo di testo o un paragrafo, l'intero elemento viene selezionato in una sola volta. -
Può anche essere utilizzato per la selezione in blocco del codice sorgente.
-
In questo esempio, il testo del primo paragrafo è selezionabile, ma il testo del secondo paragrafo non lo è. Nella classe
select-all, la proprietàuser-selectè impostata suall, permettendo di selezionare l'intero elemento in una sola volta.
Sintassi
1element {
2 user-select: auto | none | text | all | contain;
3}La proprietà user-select può essere specificata con i seguenti valori:.
auto: Utilizza il comportamento predefinito del browser. La selezione del testo è consentita nella maggior parte degli elementi, ma può essere limitata in alcuni elementi interattivi come pulsanti e link.none: La selezione del testo è completamente disabilitata. Gli utenti non potranno selezionare il testo all'interno di quell'elemento.text: Consente di selezionare solo il testo all'interno dell'elemento.all: L'intero elemento viene selezionato in una sola volta. Invece della selezione parziale, l'intero elemento viene selezionato come un tutto.contain: Supportato solo da alcuni browser. Consente di selezionare solo l'elemento nella posizione cliccata.
Browser supportati
La proprietà user-select è supportata dalla maggior parte dei browser moderni. Tuttavia, alcuni browser potrebbero richiedere prefissi dei venditori come -webkit-user-select.
- Chrome: Supportato
- Firefox: Supportato
- Safari: Supportato (richiede il prefisso
-webkit-) - Edge: Supportato
- Internet Explorer: Non supportato
Principali casi d'uso
La proprietà user-select offre i seguenti vantaggi.
- Elementi dell'interfaccia utente: Disabilita la selezione del testo per evitare interferenze con operazioni di clic o trascinamento.
- Impedire la copia del testo: Evita la selezione e la copia del testo su alcuni elementi.
- Form e elementi interattivi: Applica agli elementi interattivi dove la selezione del testo non è necessaria per migliorare l'esperienza utente.
Riepilogo
La proprietà user-select è una utile proprietà CSS che consente un controllo flessibile sulla selezione del testo in una pagina web. Può impedire agli utenti di selezionare accidentalmente testo non necessario o consentire loro di selezionare tutto in una volta, adattandosi a diverse interazioni.
La proprietà 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 proprietà
tab-sizeviene utilizzata per personalizzare lo spazio dei caratteri di tabulazione. Per impostazione predefinita, la larghezza della tabulazione è solitamente impostata su 8 spazi, ma può essere regolata a qualsiasi valore utilizzando la proprietàtab-size.
Sintassi
1element {
2 tab-size: length | number;
3}La proprietà tab-size può accettare i seguenti tipi di valori.
number: Specifica la larghezza del carattere di tabulazione in termini di numero di caratteri. Puoi specificare un numero intero o un decimale.length: Specifica la larghezza del carattere di tabulazione utilizzando unità di lunghezza (es. px, em).
Note
-
La proprietà
tab-sizeviene tipicamente utilizzata con caratteri monospaziati. Quando utilizzata con caratteri proporzionali, la larghezza della tabulazione può diventare irregolare. -
Quando si specifica il numero di caratteri, prestare attenzione alla scalabilità su dispositivi diversi.
Riepilogo
L'uso della proprietà tab-size aumenta la flessibilità nella visualizzazione di codice o caratteri di tabulazione. Come sviluppatore, impostare correttamente la larghezza della tabulazione garantisce leggibilità del codice e coerenza nel design.
La proprietà 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 proprietà
text-indentviene utilizzata per indentare la prima riga di testo in un elemento blocco di una distanza specificata. Questa proprietà consente di stilizzare solo la prima riga di un paragrafo.
Sintassi
1element {
2 text-indent: length | percentage;
3}La proprietà text-indent può accettare i seguenti tipi di valori.
length: Specifica l'indentazione utilizzando unità di lunghezza (es. px, em).percentage: Specifica l'indentazione come percentuale basata sulla larghezza dell'elemento contenitore.
Note
text-indentsi applica solo agli elementi di blocco. Non ha alcun effetto sugli elementi inline.
Riepilogo
La proprietà text-indent è uno strumento semplice ma potente per creare design di testi leggibili. Dominando le basi e comprendendo casi d'uso avanzati e considerazioni, puoi stilizzare in modo più efficace.
Puoi seguire l'articolo sopra utilizzando Visual Studio Code sul nostro canale YouTube. Controlla anche il nostro canale YouTube.