CSS-egenskaber til kodedisplay og citater

Articles

Denne artikel forklarer CSS-egenskaber relateret til kodedisplay og citater.

Du kan lære om CSS-egenskaber relateret til kodedisplay og citater, såsom quotes og user-select, inklusive deres anvendelsesmuligheder og hvordan man skriver dem.

YouTube Video

HTML til forhåndsvisning

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-egenskaber til kodedisplay og citater

`white-space` Egenskab

 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 er en CSS-egenskab, der angiver, hvordan mellemrum og linjeskift håndteres inden for et element. Som standard behandler HTML flere mellemrum som et enkelt mellemrum, men white-space-egenskaben giver dig mulighed for at ændre denne adfærd.

Primære værdier for `white-space`

normal er standardværdien, hvor flere mellemrum samles til ét, og linjer brydes automatisk.
nowrap samler mellemrum til ét, men forhindrer linjeskift. Indholdet vises på en enkelt linje.
pre bevarer mellemrum og linjeskift, som de er. Linjeombrydning forekommer ikke.
pre-wrap bevarer mellemrum og linjeskift, samtidig med at linjeombrydning tillades.
pre-line samler mellemrum, men bevarer linjeskift og tillader linjeombrydning.
break-spaces bevarer mellemrum og linjeskift og tillader linjeskift ved lange ord eller mellemrum.

`overflow-wrap` Egenskab

 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-egenskaben, tidligere kendt som word-wrap, definerer, hvordan ord håndteres, når de overskrider beholderens bredde. Ved at bruge denne egenskab kan du korrekt ombryde ord for at forhindre, at tekst flyder over og ødelægger layoutet.

I dette eksempel kan lange ord med normal flyde over beholderen og forårsage horisontal rulning, men break-word tvinger lange ord til at blive ombrudt.

Egenskabsværdier

overflow-wrap har primært to værdier:.

normal

normal er standardværdien, hvor browseren følger standardregler for ordombrydning. Normalt ombrydes ord kun ved brudpunkter som mellemrum eller bindestreger. Hvis et ord er ekstremt langt, kan det overskride beholderens bredde og ødelægge layoutet.
break-word break-word tvinger til et linjeskift, hvis nødvendigt, og ombryder teksten til næste linje uanset ordlængde. Dette hjælper med at forhindre, at containerens layout brydes på grund af lange ord.

Når break-word specificeres, brydes ord selv på steder uden mellemrum eller bindestreger for at passe inden for skærmens bredde. Dette er især nyttigt for URL'er eller meget lange ord.

Forskelle mellem `overflow-wrap` og andre egenskaber

Egenskaber, der ligner overflow-wrap, inkluderer word-break og white-space.

Forskel fra `word-break`

word-break definerer, hvordan hele ord håndteres, mens overflow-wrap kun aktiverer linjeskift, når et ord overskrider containerens bredde. For eksempel bryder word-break: break-all; ord på enhver position, selv hvis de ikke er lange, mens overflow-wrap kun bryder ord, når de overskrider containeren.

Forskel fra `white-space`

Egenskaben white-space styrer, hvordan linjeskift og mellemrum håndteres i hele teksten. I modsætning til overflow-wrap definerer white-space, om linjeskift og mellemrum bevares, men påvirker ikke direkte linjeskift af ord.

For eksempel sikrer white-space: nowrap;, at hele teksten forbliver på en enkelt linje uden linjeskift. På den anden side styrer overflow-wrap tekstens linjeskift.

Praktiske anvendelsestilfælde

overflow-wrap er særligt nyttigt i følgende situationer:.

Visning af URL'er: Forhindrer layoutproblemer ved visning af lange URL'er.
Tekniske termer: Håndterer tilfælde, hvor kontinuerlige engelske ord eller tekniske termer overskrider containerens bredde.
Responsivt design: Sikrer, at lang tekst ikke ødelægger layoutet, selv på små skærme.

`quotes`-egenskaben

1q {
2    quotes: "(" ")" "[" "]";
3}

Egenskaben quotes bruges til at tilpasse anførselstegn. Normalt indsættes anførselstegn automatisk, når indholdet i <blockquote> eller <q>-elementer omsluttes, men med egenskaben quotes kan du angive tilpassede anførselstegn.

I dette eksempel bruges parenteser ((, )) som de ydre anførselstegn. Derudover repræsenteres indlejrede anførselstegn af firkantede parenteser ([, ]).

Syntaks

1element {
2    quotes: [opening-quote closing-quote] [, opening-quote closing-quote] ...;
3}

Egenskaben quotes kan specificeres med værdier som følgende:.

none: Der vises ingen anførselstegn.
En række anførselstegn: Specificer de åbnings- og afslutningsanførselstegn. Det første sæt repræsenterer de ydre anførselstegn, mens de efterfølgende sæt er til indlejrede citater.

Hovedpunkter for `quotes`

Egenskaben quotes er nyttig til at tilpasse anførselstegn, der bruges i tekstcitater. Ved at sætte passende anførselstegn i forhold til design og sprog kan du opnå en mere sofistikeret sidepræsentation. Anvendelsen af quotes-egenskaben giver fordele som følgende:.

Tilpas anførselstegn: Du kan ændre standardformen for anførselstegn eller angive anførselstegn, der er skræddersyet til et bestemt design.
Understøtter indlejrede citater: Du kan anvende forskellige sæt anførselstegn til indlejrede citater.
Kan tilpasses efter land og sprog: Let anvendelse af forskellige stilarter for anførselstegn afhængigt af sprog eller land, hvilket er nyttigt for internationale hjemmesider.

`user-select`-egenskaben

 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-egenskaben er en CSS-egenskab, der bruges til at kontrollere, om brugere kan vælge tekst. Ved hjælp af denne egenskab kan du forhindre, at tekst kopieres i specifikke elementer eller på hele siden, eller omvendt gøre den valgfri. Hvis du angiver all for user-select-egenskaben, vælges hele elementet på én gang. For eksempel, når en bruger klikker på et tekstfelt eller et afsnit, vælges hele elementet på én gang.
Det kan også bruges til massevalg af kildekode.
I dette eksempel kan teksten i det første afsnit vælges, men teksten i det andet afsnit kan ikke. I klassen select-all er user-select-egenskaben sat til all, hvilket gør det muligt at vælge hele elementet på én gang.

Syntaks

1element {
2    user-select: auto | none | text | all | contain;
3}

user-select-egenskaben kan specificeres med følgende værdier:.

auto: Brug browserens standardadfærd. Tekstvalg er tilladt på de fleste elementer, men kan være begrænset på nogle interaktive elementer som knapper og links.
none: Tekstvalg er helt deaktiveret. Brugere vil ikke være i stand til at vælge tekst inden i det pågældende element.
text: Tillader kun, at teksten inden i elementet kan vælges.
all: Hele elementet vælges på én gang. I stedet for delvist valg vælges hele elementet som en helhed.
contain: Kun understøttet af nogle browsere. Tillader kun valg af det element, der klikker på.

Understøttede browsere

user-select-egenskaben understøttes af de fleste moderne browsere. Dog kan nogle browsere kræve udbyderpræfikser som -webkit-user-select.

Chrome: Understøttet
Firefox: Understøttet
Safari: Understøttet (kræver -webkit--præfiks)
Edge: Understøttet
Internet Explorer: Ikke understøttet

Primære anvendelsestilfælde

user-select-egenskaben tilbyder følgende fordele.

Brugerelementer: Deaktiver tekstvalg for at undgå forstyrrelser ved klik- eller trækoperationer.
Forhindre kopiering af tekst: Forhindrer tekstvalg og kopiering på visse elementer.
Formularer og interaktive elementer: Anvendes på interaktive elementer, hvor tekstvalg ikke er nødvendigt, for at forbedre brugeroplevelsen.

Sammendrag

user-select-egenskaben er en nyttig CSS-egenskab, der giver fleksibel kontrol over tekstvalg på en webside. Det kan forhindre brugere i utilsigtet at vælge unødvendig tekst eller tillade dem at vælge alt på én gang, så forskellige interaktioner imødekommes.

`tab-size`-egenskaben

 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-egenskaben bruges til at tilpasse pladsen for tabulatortegn. Som standard er tabulatorbredden normalt sat til 8 mellemrum, men den kan justeres til en hvilken som helst værdi ved hjælp af tab-size-egenskaben.

Syntaks

1element {
2    tab-size: length | number;
3}

tab-size-egenskaben kan acceptere følgende typer værdier.

number: Angiver bredden på tabulatortegnet i form af antal tegn. Du kan angive enten et heltal eller et decimaltal.
length: Angiver bredden på tabulatortegnet ved hjælp af længdeenheder (f.eks. px, em).

Noter

tab-size-egenskaben bruges typisk med skrifttyper med fast bredde. Når den bruges med proportionale skrifttyper, kan tabulatorbredden blive ujævnt.
Når du angiver antallet af tegn, skal du være opmærksom på skalering på forskellige enheder.

Sammendrag

Brugen af tab-size-egenskaben øger fleksibiliteten, når der vises kode eller tabulatortegn. Som udvikler sikrer korrekt indstilling af tabulatorbredden læsbarhed og designkonsistens i koden.

`text-indent`-egenskaben

 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-egenskaben bruges til at indrykke den første linje af tekst i et blokelement med en angivet afstand. Denne egenskab giver dig mulighed for kun at style den første linje i et afsnit.

Syntaks

1element {
2    text-indent: length | percentage;
3}

text-indent-egenskaben kan acceptere følgende typer værdier.

length: Angiver indrykning ved hjælp af længdeenheder (f.eks. px, em).
percentage: Angiver indrykning som en procentdel baseret på beholderens bredde.

Noter

text-indent gælder kun for blok-elementer. Det har ingen effekt på inline-elementer.

Sammendrag

text-indent-egenskaben er et simpelt, men kraftfuldt værktøj til at skabe læsbare tekstdesigns. Ved at mestre det grundlæggende og forstå avancerede anvendelsestilfælde og overvejelser kan du style mere effektivt.

Du kan følge med i ovenstående artikel ved hjælp af Visual Studio Code på vores YouTube-kanal. Husk også at tjekke YouTube-kanalen.

YouTube Video

CSS-egenskaber relateret til tekstafstand CSS-egenskaber relateret til boksmodellen

CSS-egenskaber til kodedisplay og citater

YouTube Video

HTML til forhåndsvisning

CSS-egenskaber til kodedisplay og citater

white-space Egenskab

Primære værdier for white-space

overflow-wrap Egenskab

Egenskabsværdier

Forskelle mellem overflow-wrap og andre egenskaber

Forskel fra word-break

Forskel fra white-space

Praktiske anvendelsestilfælde

quotes-egenskaben

Syntaks

Hovedpunkter for quotes

user-select-egenskaben

Syntaks

Understøttede browsere

Primære anvendelsestilfælde

Sammendrag

tab-size-egenskaben

Syntaks

Noter

Sammendrag

text-indent-egenskaben

Syntaks

Noter

Sammendrag

YouTube Video

`white-space` Egenskab

Primære værdier for `white-space`

`overflow-wrap` Egenskab

Forskelle mellem `overflow-wrap` og andre egenskaber

Forskel fra `word-break`

Forskel fra `white-space`

`quotes`-egenskaben

Hovedpunkter for `quotes`

`user-select`-egenskaben

`tab-size`-egenskaben

`text-indent`-egenskaben