Articles
Introductie tot CSS
CSS-eigenschappen voor codeweergave en citaten

CSS-eigenschappen voor codeweergave en citaten

Dit artikel legt CSS-eigenschappen uit die gerelateerd zijn aan codeweergave en citaten.

Je kunt meer leren over CSS-eigenschappen die verband houden met de weergave van code en citaten, zoals quotes en user-select, inclusief hun toepassingsgebieden en hoe je ze schrijft.

YouTube Video

HTML voor Voorbeeldweergave

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-eigenschappen voor codeweergave en citaten

white-space Eigenschap 

 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}

De white-space eigenschap is een CSS-eigenschap die bepaalt hoe witruimtes en regeleinden binnen een element worden behandeld. Standaard behandelt HTML meerdere spaties als één enkele spatie, maar de white-space eigenschap stelt u in staat dit gedrag aan te passen.

Belangrijkste waarden van white-space

  • normal is de standaardwaarde, waarbij meerdere spaties worden samengevoegd tot één en regels automatisch worden gebroken.
  • nowrap voegt spaties samen tot één maar voorkomt regeleinden. De inhoud wordt weergegeven in één regel.
  • pre behoudt witruimtes en regeleinden zoals ze zijn. Regels worden niet afgebroken.
  • pre-wrap behoudt witruimtes en regeleinden terwijl regels nog steeds kunnen worden afgebroken.
  • pre-line voegt spaties samen, maar behoudt regeleinden en laat regels afbreken.
  • break-spaces behoudt spaties en regeleinden, terwijl afbreken mogelijk is bij lange woorden of witruimtes.

overflow-wrap Eigenschap 

 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}

De overflow-wrap eigenschap, voorheen bekend als word-wrap, bepaalt hoe woorden worden behandeld als ze breder zijn dan de breedte van de container. Met behulp van deze eigenschap kunt u woorden correct afbreken om te voorkomen dat tekst de lay-out overschrijdt en verstoort.

In dit voorbeeld kunnen lange woorden bij normal de container overschrijden en horizontaal scrollen veroorzaken, maar break-word dwingt lange woorden om af te breken.

Eigenschapswaarden

overflow-wrap heeft primair twee waarden:.

  • normal

    normal is de standaardwaarde, waarbij de browser de standaardregels voor woordafbreking volgt. Normaal gesproken worden woorden alleen afgebroken op breekbare punten zoals spaties of koppeltekens. Als een woord extreem lang is, kan het breder zijn dan de container en de lay-out verstoren.

  • break-word break-word dwingt een regeleinde indien nodig, waarbij tekst naar de volgende regel wordt verplaatst ongeacht de lengte van het woord. Dit helpt te voorkomen dat de containerlay-out kapot gaat door lange woorden.

    Wanneer break-word is gespecificeerd, worden woorden afgebroken, zelfs op plaatsen zonder spaties of afbreekstreepjes, om binnen de schermbreedte te passen. Dit is bijzonder handig voor URL's of zeer lange woorden.

Verschillen tussen overflow-wrap en andere eigenschappen

Eigenschappen die vergelijkbaar zijn met overflow-wrap zijn onder andere word-break en white-space.

Verschil met word-break

word-break bepaalt hoe hele woorden worden behandeld, terwijl overflow-wrap alleen omslaat wanneer een woord de containerbreedte overschrijdt. Bijvoorbeeld, word-break: break-all; breekt woorden op elke positie, zelfs als ze niet lang zijn, terwijl overflow-wrap alleen woorden omslaat wanneer ze de container overschrijden.

Verschil met white-space

De eigenschap white-space bepaalt hoe regeleinden en spaties in de hele tekst worden behandeld. In tegenstelling tot overflow-wrap bepaalt white-space of regeleinden en spaties behouden blijven, maar het beïnvloedt niet direct het afbreken van woorden.

Bijvoorbeeld, white-space: nowrap; zorgt ervoor dat de gehele tekst op één regel blijft zonder te omslaan. Aan de andere kant regelt overflow-wrap het afbreken van tekst.

Praktische Toepassingen

overflow-wrap is vooral nuttig in de volgende situaties:.

  1. Weergeven van URL's: Voorkomt lay-outproblemen bij het weergeven van lange URL's.
  2. Technische Termen: Behandelt gevallen waarin continue Engelse woorden of technische termen de containerbreedte overschrijden.
  3. Responsief Ontwerp: Zorgt ervoor dat lange tekst de lay-out niet breekt, zelfs niet op kleine schermen.

quotes-eigenschap 

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

De quotes-eigenschap wordt gebruikt om aanhalingstekens aan te passen. Gewoonlijk worden aanhalingstekens automatisch ingevoegd bij het omsluiten van de inhoud van <blockquote>- of <q>-elementen, maar met de quotes-eigenschap kun je aangepaste aanhalingstekens specificeren.

In dit voorbeeld worden haakjes ((, )) gebruikt als de buitenste aanhalingstekens. Bovendien worden geneste aanhalingstekens weergegeven door middel van vierkante haakjes ([, ]).

Syntax 

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

De quotes-eigenschap kan worden opgegeven met waarden zoals de volgende:.

  • none: Er worden geen aanhalingstekens weergegeven.
  • Een reeks aanhalingstekens: Geef de openings- en sluitende aanhalingstekens op. De eerste set vertegenwoordigt de buitenste aanhalingstekens, terwijl de volgende sets bedoeld zijn voor geneste citaten.

Belangrijke punten van quotes

De quotes-eigenschap is een nuttige eigenschap om aanhalingstekens in tekstcitaten aan te passen. Door passende aanhalingstekens in te stellen op basis van het ontwerp en de taal, kun je een meer verfijnde paginaweergave bereiken. Het gebruik van de quotes-eigenschap biedt voordelen zoals de volgende:.

  • Personaliseer aanhalingstekens: Je kunt de standaardvorm van aanhalingstekens wijzigen of aanhalingstekens instellen die zijn afgestemd op een specifiek ontwerp.
  • Ondersteunt geneste aanhalingen: Je kunt verschillende reeksen aanhalingstekens toepassen voor geneste citaten.
  • Personaliseerbaar per land en taal: Pas eenvoudig verschillende stijlen van aanhalingstekens toe, afhankelijk van de taal of het land, wat handig is voor internationale websites.

user-select-eigenschap 

 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}

  • De user-select-eigenschap is een CSS-eigenschap die bepaalt of gebruikers tekst kunnen selecteren. Met deze eigenschap kun je voorkomen dat tekst in specifieke elementen of op de hele pagina wordt gekopieerd, of juist selecteerbaar maken. Als je all specificeert voor de eigenschap user-select, wordt het gehele element in één keer geselecteerd. Bijvoorbeeld, wanneer een gebruiker op een tekstveld of paragraaf klikt, wordt het gehele element in één keer geselecteerd.

  • Het kan ook worden gebruikt voor het in één keer selecteren van broncode.

  • In dit voorbeeld is de tekst van de eerste paragraaf selecteerbaar, maar de tekst van de tweede paragraaf niet. In de klasse select-all is de eigenschap user-select ingesteld op all, waardoor het gehele element in één keer kan worden geselecteerd.

Syntax 

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

De eigenschap user-select kan worden gespecificeerd met de volgende waarden:.

  • auto: Gebruik het standaardgedrag van de browser. Tekstselectie is toegestaan op de meeste elementen, maar kan beperkt zijn bij interactieve elementen zoals knoppen en links.
  • none: Tekstselectie is volledig uitgeschakeld. Gebruikers kunnen geen tekst selecteren binnen dat element.
  • text: Staat alleen toe dat de tekst binnen het element wordt geselecteerd.
  • all: Het gehele element wordt in één keer geselecteerd. In plaats van gedeeltelijke selectie wordt het gehele element in zijn geheel geselecteerd.
  • contain: Wordt alleen ondersteund door sommige browsers. Staat alleen toe dat het element op de aangeklikte locatie wordt geselecteerd.

Ondersteunde Browsers

De eigenschap user-select wordt door de meeste moderne browsers ondersteund. Sommige browsers vereisen echter leveranciersspecifieke voorvoegsels zoals -webkit-user-select.

  • Chrome: Ondersteund
  • Firefox: Ondersteund
  • Safari: Ondersteund (vereist voorvoegsel -webkit-)
  • Edge: Ondersteund
  • Internet Explorer: Niet ondersteund

Belangrijkste Toepassingen

De eigenschap user-select biedt de volgende voordelen.

  • UI-elementen: Schakel tekstselectie uit om interferentie met klik- of sleepacties te voorkomen.
  • Voorkom tekstkopiëren: Voorkom tekstselectie en kopiëren van bepaalde elementen.
  • Formulieren en interactieve elementen: Pas toe op interactieve elementen waar tekstselectie overbodig is om de gebruikerservaring te verbeteren.

Samenvatting

De user-select-eigenschap is een nuttige CSS-eigenschap die flexibele controle biedt over tekstselectie op een webpagina. Het kan voorkomen dat gebruikers per ongeluk onnodige tekst selecteren of hen in staat stellen alles in één keer te selecteren, rekening houdend met verschillende interacties.

De tab-size-eigenschap 

 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}
  • De eigenschap tab-size wordt gebruikt om de ruimte voor tabtekens aan te passen. Standaard is de tabbreedte meestal ingesteld op 8 spaties, maar dit kan worden aangepast naar elke waarde met de eigenschap tab-size.

Syntax 

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

De eigenschap tab-size kan de volgende soorten waarden accepteren.

  • number: Geeft de breedte van het tabteken op in termen van aantal tekens. U kunt een geheel getal of een decimaal opgeven.
  • length: Geeft de breedte van het tabteken op met behulp van lengteeenheden (bijv. px, em).

Notities

  • De eigenschap tab-size wordt meestal gebruikt met monospaced lettertypen. Bij gebruik met proportionele lettertypen kan de tabbreedte ongelijk worden.

  • Wees voorzichtig met het specificeren van het aantal tekens vanwege schaling op verschillende apparaten.

Samenvatting

Het gebruik van de eigenschap tab-size vergroot de flexibiliteit bij het weergeven van code of tabtekens. Als ontwikkelaar zorgt het correct instellen van de tabbreedte voor codeleesbaarheid en ontwerpconsistentie.

De text-indent-eigenschap 

 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}
  • De eigenschap text-indent wordt gebruikt om de eerste regel van tekst in een blokelement in te springen met een opgegeven afstand. Met deze eigenschap kunt u alleen de eerste regel van een alinea stylen.

Syntax 

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

De eigenschap text-indent kan de volgende soorten waarden accepteren.

  • length: Geeft de inspringing op met behulp van lengteenheden (bijv. px, em).
  • percentage: Geeft de inspringing op als een percentage gebaseerd op de breedte van het containerelement.

Notities

  • text-indent is alleen van toepassing op block-elementen. Het heeft geen effect op inline-elementen.

Samenvatting

De eigenschap text-indent is een eenvoudige maar krachtige tool voor het creëren van leesbare tekstontwerpen. Door de basis te beheersen en geavanceerde toepassingsmogelijkheden en overwegingen te begrijpen, kun je effectiever stijlen.

Je kunt het bovenstaande artikel volgen met Visual Studio Code op ons YouTube-kanaal. Bekijk ook het YouTube-kanaal.

YouTube Video

CSS-eigenschappen met betrekking tot tekstafstandCSS-eigenschappen gerelateerd aan het boxmodel