CSS-egenskaper for kodedisplay og sitater

Articles

Denne artikkelen forklarer CSS-egenskaper relatert til kodedisplay og sitater.

Du kan lære om CSS-egenskaper knyttet til visning av kode og sitater, som quotes og user-select, inkludert deres bruksområder og hvordan man skriver dem.

YouTube Video

HTML for 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-egenskaper for kodedisplay og sitater

`white-space`-egenskap

 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-egenskapen er en CSS-egenskap som spesifiserer hvordan mellomrom og linjeskift håndteres innenfor et element. Som standard behandler HTML flere mellomrom som ett enkelt mellomrom, men white-space-egenskapen lar deg endre denne oppførselen.

Hovedverdier for `white-space`

normal er standardverdien, der flere mellomrom kollapser til ett, og linjer brytes automatisk.
nowrap slår sammen mellomrom til ett, men hindrer linjeskift. Innholdet vises på én enkelt linje.
pre bevarer mellomrom og linjeskift slik de er. Linjebryting skjer ikke.
pre-wrap bevarer mellomrom og linjeskift samtidig som det tillater linjebryting.
pre-line slår sammen mellomrom, men bevarer linjeskift og tillater linjebryting.
break-spaces bevarer mellomrom og linjeskift, samtidig som det tillater brytning ved lange ord eller mellomrom.

`overflow-wrap`-egenskap

 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-egenskapen, tidligere kjent som word-wrap, definerer hvordan ord håndteres når de overstiger beholderens bredde. Ved å bruke denne egenskapen kan du korrekt bryte ord for å forhindre at tekst flyter over og ødelegger layouten.

I dette eksempelet, med normal, kan lange ord flyte over beholderen og forårsake horisontal rulling, men break-word tvinger lange ord til å brytes.

Egenskapsverdier

overflow-wrap har hovedsakelig to verdier:.

normal

normal er standardverdien, der nettleseren følger standard regler for ordbryting. Vanligvis brytes ord kun ved brytbare punkter som mellomrom eller bindestreker. Hvis et ord er ekstremt langt, kan det overstige beholderens bredde og ødelegge layouten.
break-word break-word tvinger til linjebryting hvis nødvendig, ved å bryte teksten til neste linje uavhengig av ordets lengde. Dette hjelper med å forhindre at oppsettet for containeren blir ødelagt på grunn av lange ord.

Når break-word er spesifisert, brytes ord selv på steder uten mellomrom eller bindestreker for å passe inn i skjermens bredde. Dette er spesielt nyttig for URL-er eller svært lange ord.

Forskjeller mellom `overflow-wrap` og andre egenskaper

Egenskaper som ligner på overflow-wrap inkluderer word-break og white-space.

Forskjell fra `word-break`

word-break definerer hvordan hele ord håndteres, mens overflow-wrap kun utløser linjedeling når et ord overstiger containerens bredde. For eksempel bryter word-break: break-all; ord på hvilken som helst posisjon, selv om de ikke er lange, mens overflow-wrap kun bryter ord når de overstiger containeren.

Forskjell fra `white-space`

white-space-egenskapen styrer hvordan linjeskift og mellomrom håndteres i hele teksten. I motsetning til overflow-wrap definerer white-space om linjeskift og mellomrom bevares, men påvirker ikke direkte linjedeling av ord.

For eksempel sikrer white-space: nowrap; at hele teksten holder seg på en enkelt linje uten linjedeling. På den andre siden kontrollerer overflow-wrap linjedeling av tekst.

Praktiske bruksområder

overflow-wrap er spesielt nyttig i følgende situasjoner:.

Visning av URL-er: Forhindrer oppsettproblemer når du viser lange URL-er.
Tekniske termer: Håndterer tilfeller der kontinuerlige engelske ord eller tekniske termer overstiger containerens bredde.
Responsivt design: Sikrer at lang tekst ikke ødelegger oppsettet selv på små skjermer.

`quotes`-egenskapen

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

quotes-egenskapen brukes til å tilpasse anførselstegn. Vanligvis settes anførselstegn automatisk inn når innholdet i <blockquote>- eller <q>-elementer omsluttes, men ved å bruke quotes-egenskapen kan du spesifisere egendefinerte anførselstegn.

I dette eksemplet brukes parenteser ((, )) som ytre anførselstegn. I tillegg representeres nestede anførselstegn av hakeparenteser ([, ]).

Syntaks

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

quotes-egenskapen kan spesifiseres med verdier som følgende:.

none: Ingen anførselstegn vil bli vist.
En serie med anførselstegn: Spesifiser de åpnende og avsluttende anførselstegnene. Det første settet representerer de ytre anførselstegnene, mens de påfølgende settene brukes for nestede sitater.

Hovedpoengene med `quotes`

quotes-egenskapen er nyttig for å tilpasse anførselstegn brukt i tekstsitater. Ved å sette passende anførselstegn i henhold til design og språk, kan du oppnå en mer sofistikert presentasjon av siden. Bruk av quotes-egenskapen gir fordeler som følgende:.

Tilpass anførselstegn: Du kan endre standardformen for anførselstegn eller angi anførselstegn som er tilpasset et spesifikt design.
Støtter nestede sitater: Du kan bruke forskjellige sett med anførselstegn for nestede sitater.
Tilpassbar etter land og språk: Enkle å bruke forskjellige stiler av anførselstegn avhengig av språk eller land, noe som er nyttig for internasjonale nettsteder.

`user-select`-egenskapen

 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-egenskapen er en CSS-egenskap brukes til å kontrollere om brukere kan velge tekst. Ved å bruke denne egenskapen kan du forhindre at tekst kopieres i spesifikke elementer eller på hele siden, eller omvendt gjøre teksten valgfri. Hvis du angir all for egenskapen user-select, blir hele elementet valgt på én gang. For eksempel, når en bruker klikker på et tekstfelt eller et avsnitt, blir hele elementet valgt på én gang.
Det kan også brukes for å velge større mengder kildekode.
I dette eksempelet er teksten i det første avsnittet valgbart, men teksten i det andre avsnittet er det ikke. I klassen select-all er egenskapen user-select satt til all, som tillater at hele elementet velges på én gang.

Syntaks

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

Egenskapen user-select kan angis med følgende verdier:.

auto: Bruk nettleserens standard oppførsel. Tekstvalg er tillatt på de fleste elementer, men kan være begrenset på enkelte interaktive elementer som knapper og lenker.
none: Tekstvalg er fullstendig deaktivert. Brukere vil ikke kunne velge tekst innenfor det elementet.
text: Tillater at kun teksten innenfor elementet kan velges.
all: Hele elementet velges på én gang. I stedet for delvis valg, blir hele elementet valgt som en helhet.
contain: Støttes kun av enkelte nettlesere. Tillater at kun elementet på den klikkede plasseringen velges.

Støttede nettlesere

Egenskapen user-select støttes av de fleste moderne nettlesere. Noen nettlesere kan imidlertid kreve leverandør-prefikser som -webkit-user-select.

Chrome: Støttet
Firefox: Støttet
Safari: Støttet (krever -webkit--prefiks)
Edge: Støttet
Internet Explorer: Ikke støttet

Hovedbruksområder

Egenskapen user-select gir følgende fordeler.

Brukergrensesnittelementer: Deaktiver tekstvalg for å unngå forstyrrelser med klikk- eller draoperasjoner.
Forhindre tekstkopiering: Forhindrer tekstvalg og kopiering på enkelte elementer.
Skjemaer og interaktive elementer: Brukes på interaktive elementer der tekstvalg ikke er nødvendig for å forbedre brukeropplevelsen.

Sammendrag

user-select-egenskapen er en nyttig CSS-egenskap som gir fleksibel kontroll over tekstvalg på en nettside. Den kan forhindre brukere i å ved et uhell velge unødvendig tekst eller tillate dem å velge alt på en gang, tilpasset ulike interaksjoner.

`tab-size`-egenskapen

 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-egenskapen brukes til å tilpasse avstanden for tabulatortegn. Som standard er tabulatorbredden vanligvis satt til 8 mellomrom, men det kan justeres til hvilken som helst verdi ved hjelp av tab-size-egenskapen.

Syntaks

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

tab-size-egenskapen kan godta følgende typer verdier.

number: Angir bredden på tabulatortegnet i antall tegn. Du kan spesifisere enten et heltall eller en desimal.
length: Angir bredden på tabulatortegnet ved bruk av lengdeenheter (f.eks. px, em).

Notater

tab-size-egenskapen brukes vanligvis med monospaced skrift. Når det brukes med proporsjonale skrifter, kan tabulatorbredden bli ujevn.
Vær oppmerksom på skalering på ulike enheter når du angir antall tegn.

Sammendrag

Bruken av tab-size-egenskapen gir økt fleksibilitet ved visning av kode eller tabulatortegn. Som utvikler sikrer riktig innstilling av tabulatorbredden lesbarhet og konsistens i designet.

`text-indent`-egenskapen

 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-egenskapen brukes til å innrykke første linje av tekst i et blokkelement med en spesifisert avstand. Denne egenskapen lar deg style kun den første linjen i et avsnitt.

Syntaks

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

text-indent-egenskapen kan godta følgende typer verdier.

length: Angir innrykket ved bruk av lengdeenheter (f.eks. px, em).
percentage: Angir innrykket som en prosentandel basert på bredden av beholderelementet.

Notater

text-indent gjelder kun blokk-elementer. Det har ingen effekt på inline-elementer.

Sammendrag

text-indent-egenskapen er et enkelt, men kraftig verktøy for å lage lesbare tekstdesign. Ved å mestre det grunnleggende og forstå avanserte bruksområder og hensyn, kan du style mer effektivt.

Du kan følge med på artikkelen ovenfor ved å bruke Visual Studio Code på vår YouTube-kanal. Vennligst sjekk ut YouTube-kanalen.

YouTube Video

CSS-egenskaper relatert til tekstavstand CSS-egenskaper relatert til boksmodellen

CSS-egenskaper for kodedisplay og sitater

YouTube Video

HTML for Forhåndsvisning

CSS-egenskaper for kodedisplay og sitater

white-space-egenskap

Hovedverdier for white-space

overflow-wrap-egenskap

Egenskapsverdier

Forskjeller mellom overflow-wrap og andre egenskaper

Forskjell fra word-break

Forskjell fra white-space

Praktiske bruksområder

quotes-egenskapen

Syntaks

Hovedpoengene med quotes

user-select-egenskapen

Syntaks

Støttede nettlesere

Hovedbruksområder

Sammendrag

tab-size-egenskapen

Syntaks

Notater

Sammendrag

text-indent-egenskapen

Syntaks

Notater

Sammendrag

YouTube Video

`white-space`-egenskap

Hovedverdier for `white-space`

`overflow-wrap`-egenskap

Forskjeller mellom `overflow-wrap` og andre egenskaper

Forskjell fra `word-break`

Forskjell fra `white-space`

`quotes`-egenskapen

Hovedpoengene med `quotes`

`user-select`-egenskapen

`tab-size`-egenskapen

`text-indent`-egenskapen