CSS-egenskaper för kodvisning och citat

Articles

Den här artikeln förklarar CSS-egenskaper relaterade till kodvisning och citat.

Du kan lära dig om CSS-egenskaper relaterade till kodvisning och citat, såsom quotes och user-select, inklusive deras användningsområden och hur man skriver dem.

YouTube Video

HTML för förhandsgranskning

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 för kodvisning och citat

`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 är en CSS-egenskap som specificerar hur blanksteg och radbrytningar hanteras inom ett element. Som standard behandlar HTML flera mellanslag som ett enda mellanslag, men med white-space-egenskapen kan du ändra detta beteende.

Huvudvärden för `white-space`

normal är standardvärdet, där flera mellanslag komprimeras till ett och radbrytningar sker automatiskt.
nowrap komprimerar mellanslag till ett men förhindrar radbrytningar. Innehållet visas i en enda rad.
pre bevarar blanksteg och radbrytningar exakt som de är. Radbrytning occurs inte.
pre-wrap bevarar blanksteg och radbrytningar samtidigt som radbrytning är tillåten.
pre-line komprimerar mellanslag men bevarar radbrytningar och tillåter radbrytning.
break-spaces bevarar mellanslag och radbrytningar samtidigt som det tillåter brytningar vid långa ord eller mellanslag.

`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, tidigare känd som word-wrap, definierar hur ord hanteras när de överskrider behållarens bredd. Med hjälp av denna egenskap kan du hantera radbrytningar korrekt för att förhindra att text flödar över och förstör layouten.

I detta exempel kan långa ord med normal flöda över behållaren och orsaka horisontell rullning, men med break-word tvingas långa ord att brytas.

Egenskapsvärden

overflow-wrap har huvudsakligen två värden:.

normal

normal är standardvärdet, där webbläsaren följer standardregler för radbrytning av ord. Normalt bryts ord endast vid brytpunkter som mellanslag eller bindestreck. Om ett ord är extremt långt kan det överskrida behållarens bredd och förstöra layouten.
break-word break-word tvingar fram ett radbrytning vid behov och bryter text till nästa rad oavsett ordets längd. Detta hjälper till att förhindra att containerlayouten bryts på grund av långa ord.

När break-word anges bryts ord även på ställen utan mellanslag eller bindestreck för att passa inom skärmens bredd. Detta är särskilt användbart för URL:er eller mycket långa ord.

Skillnader mellan `overflow-wrap` och andra egenskaper

Egenskaper som liknar overflow-wrap inkluderar word-break och white-space.

Skillnad från `word-break`

word-break definierar hur hela ord hanteras, medan overflow-wrap bara aktiverar radbrytning när ett ord överskrider containerbredden. Till exempel bryter word-break: break-all; ord på vilken position som helst, även om de inte är långa, medan overflow-wrap bara bryter ord när de överskrider containern.

Skillnad från `white-space`

white-space-egenskapen kontrollerar hur radbrytningar och mellanslag hanteras i hela texten. Till skillnad från overflow-wrap definierar white-space om radbrytningar och mellanslag bevaras men påverkar inte direkt hur ord bryts.

Till exempel säkerställer white-space: nowrap; att hela texten förblir på en enda rad utan radbrytning. Å andra sidan kontrollerar overflow-wrap hur text bryts.

Praktiska användningsfall

overflow-wrap är särskilt användbart i följande situationer:.

Visa URL:er: Förhindrar layoutproblem vid visning av långa URL:er.
Tekniska termer: Hanterar fall där sammanhängande engelska ord eller tekniska termer överskrider containerbredden.
Responsiv design: Säkerställer att långa texter inte bryter layouten även på små skärmar.

`quotes`-egenskap

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

Egenskapen quotes används för att anpassa citattecken. Vanligtvis infogas citattecken automatiskt när innehållet i <blockquote>- eller <q>-element omsluts, men med egenskapen quotes kan du ange egna citattecken.

I det här exemplet används parenteser ((, )) som yttre citattecken. Dessutom representeras inbäddade citattecken med hjälp av hakparenteser ([, ]).

Syntax

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

Egenskapen quotes kan anges med värden som följande:.

none: Inga citattecken kommer att visas.
En serie av citattecken: Ange öppnings- och avslutningstecken. Den första uppsättningen representerar de yttre citattecknen, medan de efterföljande uppsättningarna används för inbäddade citat.

Huvudpunkter för `quotes`

Egenskapen quotes är en användbar egenskap för att anpassa citattecken som används i textcitat. Genom att ange lämpliga citattecken enligt design och språk kan du uppnå en mer sofistikerad sidpresentation. Att använda egenskapen quotes ger fördelar som de följande:.

Anpassa citattecken: Du kan ändra standardformen för citattecken eller ange citattecken anpassade till en specifik design.
Stöder inbäddade citat: Du kan tillämpa olika uppsättningar citattecken för inbäddade citat.
Anpassningsbar efter land och språk: Enkel tillämpning av olika stilar av citattecken beroende på språk eller land, vilket är användbart för internationella webbplatser.

`user-select`-egenskap

 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}

Egenskapen user-select är en CSS-egenskap som används för att styra om användare kan markera text. Genom att använda denna egenskap kan du förhindra att text kopieras i specifika element eller över hela sidan, eller tvärtom göra den valbar. Om du anger all för user-select-egenskapen väljs hela elementet på en gång. Till exempel, när en användare klickar på ett textfält eller en paragraf väljs hela elementet på en gång.
Det kan också användas för att markera källkod i stora mängder.
I detta exempel är texten i den första paragrafen valbar, men texten i den andra paragrafen är inte det. I klassen select-all är user-select-egenskapen inställd på all, vilket tillåter hela elementet att väljas på en gång.

Syntax

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

user-select-egenskapen kan anges med följande värden:.

auto: Använd webbläsarens standardbeteende. Textval är tillåtet på de flesta element, men kan vara begränsat på vissa interaktiva element som knappar och länkar.
none: Textval är helt inaktiverat. Användare kommer inte att kunna välja text inom det elementet.
text: Tillåter endast att texten inom elementet väljs.
all: Hela elementet markeras på en gång. Istället för att delvis välja markeras hela elementet som en helhet.
contain: Stöds endast av vissa webbläsare. Tillåter endast att elementet vid den klickade platsen väljs.

Stödda webbläsare

user-select-egenskapen stöds av de flesta moderna webbläsare. Vissa webbläsare kan dock kräva leverantörsprefix som -webkit-user-select.

Chrome: Stöds
Firefox: Stöds
Safari: Stöds (kräver -webkit--prefix)
Edge: Stöds
Internet Explorer: Stöds inte

Huvudsakliga användningsområden

user-select-egenskapen erbjuder följande fördelar.

Användargränssnittselement: Inaktivera textmarkering för att undvika störningar vid klick- eller draoperationer.
Förhindra kopiering av text: Förhindra textmarkering och kopiering på vissa element.
Formulär och interaktiva element: Använd på interaktiva element där textmarkering är onödig för att förbättra användarupplevelsen.

Sammanfattning

Egenskapen user-select är en användbar CSS-egenskap som tillåter flexibel kontroll över textmarkering på en webbsida. Den kan förhindra att användare oavsiktligt markerar onödig text eller låta dem markera allt på en gång, vilket stödjer olika interaktioner.

Egenskapen `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}

Egenskapen tab-size används för att anpassa utrymmet för tabbtecken. Som standard är tabbbredden vanligtvis inställd på 8 tecken, men den kan justeras till vilket värde som helst med hjälp av egenskapen tab-size.

Syntax

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

Egenskapen tab-size kan acceptera följande typer av värden.

nummer: Anger bredden på tabbtecknet i antal tecken. Du kan ange antingen ett heltal eller ett decimaltal.
längd: Anger bredden på tabbtecknet med längdenheter (t.ex. px, em).

Anteckningar

Egenskapen tab-size används vanligtvis med monospaced typsnitt. När den används med proportionella typsnitt kan tabbbredden bli ojämn.
När du anger antalet tecken bör du vara medveten om skalning på olika enheter.

Sammanfattning

Genom att använda egenskapen tab-size ökar flexibiliteten vid visning av kod eller tabbtecken. Som utvecklare säkerställer du läsbarheten av koden och konsekvens i designen genom att korrekt ställa in tabbbredden.

Egenskapen `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}

Egenskapen text-indent används för att indentera den första raden i en text i ett blockelement med en angiven avstånd. Denna egenskap gör det möjligt att endast styla den första raden i ett stycke.

Syntax

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

Egenskapen text-indent kan acceptera följande typer av värden.

längd: Anger indraget med hjälp av längdenheter (t.ex. px, em).
procent: Anger indraget som en procentandel baserat på bredden av containerelementet.

Anteckningar

text-indent gäller endast blockelement. Det har ingen effekt på inline-element.

Sammanfattning

text-indent är en enkel men kraftfull egenskap för att skapa läsbara textdesigner. Genom att behärska grunderna och förstå avancerade tillämpningar och överväganden kan du styla mer effektivt.

Du kan följa med i artikeln ovan med hjälp av Visual Studio Code på vår YouTube-kanal. Vänligen kolla även in YouTube-kanalen.

YouTube Video

CSS-egenskaper relaterade till textavstånd CSS-egenskaper relaterade till boxmodellen

CSS-egenskaper för kodvisning och citat

YouTube Video

HTML för förhandsgranskning

CSS-egenskaper för kodvisning och citat

white-space-egenskap

Huvudvärden för white-space

overflow-wrap-egenskap

Egenskapsvärden

Skillnader mellan overflow-wrap och andra egenskaper

Skillnad från word-break

Skillnad från white-space

Praktiska användningsfall

quotes-egenskap

Syntax

Huvudpunkter för quotes

user-select-egenskap

Syntax

Stödda webbläsare

Huvudsakliga användningsområden

Sammanfattning

Egenskapen tab-size

Syntax

Anteckningar

Sammanfattning

Egenskapen text-indent

Syntax

Anteckningar

Sammanfattning

YouTube Video

`white-space`-egenskap

Huvudvärden för `white-space`

`overflow-wrap`-egenskap

Skillnader mellan `overflow-wrap` och andra egenskaper

Skillnad från `word-break`

Skillnad från `white-space`

`quotes`-egenskap

Huvudpunkter för `quotes`

`user-select`-egenskap

Egenskapen `tab-size`

Egenskapen `text-indent`