Articles
Introduktion til CSS
CSS-egenskaber relateret til tekstafstand

CSS-egenskaber relateret til tekstafstand

Denne artikel forklarer CSS-egenskaber relateret til tekstafstand.

Du kan lære om brugen af og hvordan man skriver egenskaber som line-height og word-spacing.

YouTube Video

Oprettelse af HTML til forhåndsvisning

css-text-space.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-text-space.css">
  9</head>
 10<body>
 11    <!-- Header -->
 12    <header>
 13        <h1>Text-Related CSS Properties Example</h1>
 14    </header>
 15
 16    <!-- Main content -->
 17    <main>
 18        <header>
 19            <h2>Typography (Text-Related)</h2>
 20        </header>
 21        <article>
 22            <h3>line-height</h3>
 23            <section>
 24                <header><h4>line-height: normal</h4></header>
 25                <section class="sample-view">
 26                    <p class="line-height-normal">This is a paragraph with normal line height.</p>
 27                </section>
 28                <header><h4>line-height: 1.5</h4></header>
 29                <section class="sample-view">
 30                    <p class="line-height-150">This is a paragraph with 1.5 line height.</p>
 31                </section>
 32                <header><h4>line-height: 200%</h4></header>
 33                <section class="sample-view">
 34                    <p class="line-height-200">This is a paragraph with 200% line height.</p>
 35                </section>
 36            </section>
 37        </article>
 38        <article>
 39            <h3>letter-spacing</h3>
 40            <section>
 41                <header><h4>letter-spacing: normal</h4></header>
 42                <section class="sample-view">
 43                    <p class="letter-spacing-normal">This is text with normal letter spacing.</p>
 44                </section>
 45                <header><h4>letter-spacing: 4px</h4></header>
 46                <section class="sample-view">
 47                    <p class="letter-spacing-wide">This is text with wide letter spacing.</p>
 48                </section>
 49                <header><h4>letter-spacing: -1px</h4></header>
 50                <section class="sample-view">
 51                    <p class="letter-spacing-narrow">This is text with narrow letter spacing.</p>
 52                </section>
 53            </section>
 54        </article>
 55        <article>
 56            <h3>word-spacing</h3>
 57            <section>
 58                <header><h4>word-spacing: normal</h4></header>
 59                <section class="sample-view">
 60                    <p class="word-spacing-normal">This is text with normal word spacing.</p>
 61                </section>
 62                <header><h4>word-spacing: 4px</h4></header>
 63                <section class="sample-view">
 64                    <p class="word-spacing-wide">This is text with wide word spacing.</p>
 65                </section>
 66                <header><h4>word-spacing: -1px</h4></header>
 67                <section class="sample-view">
 68                    <p class="word-spacing-narrow">This is text with narrow word spacing.</p>
 69                </section>
 70                <header><h4>word-spacing: -0.1em; letter-spacing: -0.05em;</h4></header>
 71                <section class="sample-view">
 72                    <p class="word-and-letter-spacing">This is text with word and letter spacing.</p>
 73                </section>
 74            </section>
 75        </article>
 76        <article>
 77            <h3>word-break</h3>
 78            <section>
 79                <header><h4>word-break: normal</h4></header>
 80                <section class="sample-view">
 81                    <p class="box word-break-normal">Thisisaverylongwordthatwillnotbreakwithword-breaknormal.</p>
 82                </section>
 83                <header><h4>word-break: break-all</h4></header>
 84                <section class="sample-view">
 85                    <p class="box word-break-break-all">Thisisaverylongwordthatwillnotbreakwithword-breaknormal.</p>
 86                </section>
 87                <header><h4>word-break: keep-all</h4></header>
 88                <section class="sample-view">
 89                    <p class="box word-break-keep-all">&#12371;&#12428;&#12399;&#26085;&#26412;&#35486;&#12398;&#25991;&#31456;&#12391;&#12377;&#12290;&#12371;&#12398;&#35373;&#23450;&#12391;&#12399;&#33258;&#28982;&#12395;&#25913;&#34892;&#12373;&#12428;&#12414;&#12377;&#12290;</p>
 90                </section>
 91            </section>
 92        </article>
 93        <article>
 94            <h3>hyphens</h3>
 95            <section>
 96                <header><h4>hyphens: none</h4></header>
 97                <section class="sample-view">
 98                    <p class="no-hyphens">
 99                        Supercalifragilisticexpialidocious is a very long word.
100                    </p>
101                </section>
102                <header><h4>HTML</h4></header>
103<pre>
104&lt;p class="no-hyphens"&gt;
105    Supercalifragilisticexpialidocious is a very long word.
106&lt;/p&gt;
107</pre>
108                <header><h4>hyphens: manual</h4></header>
109                <section class="sample-view">
110                    <p class="manual-hyphens">
111                        Super&shy;califragilistic&shy;expialidocious is a very long word.
112                    </p>
113                </section>
114                <header><h4>HTML</h4></header>
115<pre>
116&lt;p class="manual-hyphens"&gt;
117    Super&amp;shy;califragilistic&amp;shy;expialidocious is a very long word.
118&lt;/p&gt;
119</pre>
120                <header><h4>hyphens: auto</h4></header>
121                <section class="sample-view">
122                    <p class="auto-hyphens">
123                        Supercalifragilisticexpialidocious is a very long word.
124                    </p>
125                </section>
126                <header><h4>HTML</h4></header>
127<pre>
128&lt;p class="auto-hyphens"&gt;
129    Supercalifragilisticexpialidocious is a very long word.
130&lt;/p&gt;
131</pre>
132            </section>
133        </article>
134    </main>
135</body>
136</html>

Typografi (Relateret til tekstmargener)

line-height-egenskab 

 1/* Line height examples */
 2.line-height-normal {
 3    line-height: normal; /* Default line height */
 4}
 5
 6.line-height-150 {
 7    line-height: 1.5; /* 1.5 times the font size */
 8}
 9
10.line-height-200 {
11    line-height: 200%; /* 200% of the font size */
12}

line-height er en CSS-egenskab, der bruges til at indstille linjeafstanden (linjehøjden). line-height angiver den vertikale afstand mellem linjer, brugt til at forbedre læsbarheden eller justere afstanden som en del af designet.

Hovedanvendelser af line-height

Enhedsløse tal 
1p {
2    line-height: 1.5; /* 1.5 times the font size */
3}
  • Angiv en højde i forhold til skriftstørrelsen. For eksempel, hvis man angiver 1.5, sættes linjehøjden til 1,5 gange skriftstørrelsen. Denne metode er nyttig til responsivt design.
Procent 
1p {
2    line-height: 150%;
3}
  • Angiv linjehøjden som en procentdel af skriftstørrelsen. For eksempel, hvis man angiver 150%, sættes linjehøjden til 150% af skriftstørrelsen.
Faste værdier (px, em, rem, etc.) 
1p {
2    line-height: 20px;
3}
  • Angiv linjehøjden i absolutte enheder. For eksempel kan du angive en konkret værdi som 20px, men det kan mangle fleksibilitet i responsivt design.
normal 
1p {
2    line-height: normal;
3}
  • Angivelse af normal anvender browserens standardindstillinger for linjeafstand. Typisk vil det være omkring 1,2 til 1,4 gange skriftstørrelsen.

Eksempler på brug af line-height

Læsbare afsnit
  • En line-height på omkring 1.5 til 1.6 anbefales normalt for læsbarhed. Hvis linjeafstanden er for smal, vil teksten være sammenklemt og svær at læse, og hvis den er for bred, vil teksten føles fragmenteret.
Overskriftdesign
  • For overskrifter og titler, hvor teksten er større, kan linjeafstanden reduceres. Indstillinger som 1.1 eller 1.2 bruges ofte.

Sammendrag

  • line-height er en vigtig egenskab til at forbedre både læsbarheden og designet af tekst.
  • Brug af relative værdier (tal eller procenter) gør det nemmere at tilpasse sig responsive designs.
  • For overskrifter med stor tekst og afsnit med mindre tekst er det afgørende at sætte passende linjeafstand for hver.

Udnyttelse af denne egenskab kan gøre tekstens udseende mere læsbart og forbedre dens designkvalitet.

letter-spacing-egenskab 

 1/* Letter spacing examples */
 2.letter-spacing-normal {
 3    letter-spacing: normal; /* Default letter spacing */
 4}
 5
 6.letter-spacing-wide {
 7    letter-spacing: 4px; /* Increase letter spacing */
 8}
 9
10.letter-spacing-narrow {
11    letter-spacing: -1px; /* Decrease letter spacing */
12}

letter-spacing er en CSS-egenskab, der bruges til at justere afstanden mellem tegn (bogstavafstand). Denne egenskab kan bruges til at finjustere tekstdesign, forbedre læsbarhed og opnå specifikke stilarter.

I dette eksempel er det angivet som følger.

  • normal: Den standard bogstavafstand. Det er en standardværdi, der bestemmes af browseren og skrifttypen.
  • 4px: Et eksempel på udvidet bogstavafstand. Tilføjer 4 pixels mellemrum mellem hvert tegn.
  • -1px: Et eksempel på formindsket bogstavafstand. Reducerer 1 pixel mellemrum mellem hvert tegn.

Sådan bruges letter-spacing

Værdier med enheder 
1p.increased {
2    letter-spacing: 2px;  /* Increase letter spacing by 2px */
3}
4p.decreased {
5    letter-spacing: -1em;  /* Decrease letter spacing by 1em */
6}
  • Indstilling af en positiv værdi vil øge bogstavafstanden.
  • Indstilling af en negativ værdi vil mindske bogstavafstanden.
  • Enheder er typisk i px (pixels) eller em.
Standard: normal 
1p {
2    letter-spacing: normal;  /* Default letter spacing */
3}
  • Brug standard bogstavafstand. Normalt anvendes den standard bogstavafstand, som er defineret af skrifttypen.

Eksempler på brug af letter-spacing

  • Forbedret læsbarhed: For små skriftstørrelser eller alt for tætsiddende skrifttyper kan du forbedre læsbarheden ved at øge letter-spacing.
  • Designjustering: Du kan justere bogstavafstanden for visuelt at fremhæve designelementer som titler eller logoer.
  • Justering mellem ord: Du kan justere afstanden på bogstavniveau i stedet for mellem ordene. letter-spacing justerer afstanden mellem bogstaver, men brug word-spacing for at øge afstanden mellem ord.
  • Designbalance: Hvis du øger bogstavafstanden for meget, kan hele teksten komme til at se for udstrakt ud. Omvendt, hvis du reducerer den for meget, kan teksten blive trang og svær at læse, så det er vigtigt at opretholde en passende balance.

Sammendrag

  • letter-spacing er en egenskab, der justerer afstanden mellem bogstaver og påvirker både design og læsbarhed.
  • Du kan øge afstanden med positive værdier og reducere den med negative værdier.
  • Det er effektivt for titler og specifikke designelementer, men vær forsigtig med ikke at gå på kompromis med læsbarheden.

Ved at bruge denne egenskab kan du justere tekstens udseende og opnå attraktive designs.

word-spacing-egenskaben 

 1/* Word spacing examples */
 2.word-spacing-normal {
 3    word-spacing: normal; /* Default word spacing */
 4}
 5
 6.word-spacing-wide {
 7    word-spacing: 4px; /* Increase word spacing */
 8}
 9
10.word-spacing-narrow {
11    word-spacing: -1px; /* Decrease word spacing */
12}
13
14.word-and-letter-spacing {
15    word-spacing: -0.1em;
16    letter-spacing: -0.05em;
17}

word-spacing er en CSS-egenskab, der styrer afstanden mellem ord i en tekst. Korrekt brug af denne egenskab kan forbedre visuel balance og tekstlæsbarhed. word-spacing er særligt nyttigt i typografifokuserede design og responsive designscenarier.

I dette eksempel er det angivet som følger.

  • normal: Anvender standardordafstanden. Dette er browserens oprindelige værdi.
  • 4px: Et eksempel på øget ordafstand. Tilføjer 4 pixels margin mellem hvert ord.
  • -1px: Et eksempel på reduceret ordafstand. Reducerer afstanden mellem hvert ord med 1 pixel.
  • ord-og-bogstav-afstand: Et eksempel på reduceret ord- og bogstavafstand. Reducerer afstanden mellem ord med 0.1em og mellem bogstaver med 0.05em sammenlignet med normalt.

Brug af positive og negative værdier

Angivelse af en positiv værdi for ord-afstand vil udvide ordafstanden. Omvendt vil brug af negative værdier mindske afstanden mellem ord. Negative værdier kan bruges til at fremhæve visuelle effekter eller til at stramme bogstavsafstanden af særlige designmæssige årsager.

Forskellen på ord-afstand og bogstav-afstand

ord-afstand er en egenskab, der justerer afstanden mellem ord, mens bogstav-afstand justerer afstanden mellem bogstaver. Ved at kombinere disse egenskaber kan du få mere præcis kontrol over typografien i hele teksten.

Forsigtighedsregler og bedste praksis

  • Overdreven pladsjustering: Overbrug af ord-afstand kan føre til nedsat læsbarhed. Især for store eller for små mellemrum kan være anstrengende for brugerne, så moderat justering er vigtig.
  • Responsivt design: Angivelse af relative værdier ved hjælp af em eller rem er effektivt for responsivt design, da det sikrer korrekt visning på tværs af forskellige skærmstørrelser.
  • Overskriftsstiljustering: Ved at udvide afstanden mellem ord i overskriftstekst kan du tilføje visuel vægt. Dette giver dig mulighed for at tydeliggøre indholdets hierarki og opnå et sofistikeret design.

word-break-egenskab 

 1p.box {
 2    width: 200px;
 3    border: 1px solid #000;
 4    margin-bottom: 20px;
 5}
 6
 7.word-break-normal {
 8    word-break: normal;
 9}
10
11.word-break-break-all {
12    word-break: break-all;
13}
14
15.word-break-keep-all {
16    word-break: keep-all;
17}

word-break er en CSS-egenskab, der styrer, hvordan tekst ombrydes, når den overstiger containerens bredde. Normalt bryder browsere linjer ved ordgrænser, men specifikke indstillinger kan forbedre udseendet og læsbarheden, når lange ord eller URL'er er til stede.

Du kan angive følgende værdier for word-break-egenskaben.

  • normal

    normal er standardværdien. Når et ord overstiger containerens bredde, brydes det ved ordgrænser. Denne indstilling er almindelig i sprog som engelsk, og der forekommer ikke brud midt i ord.

  • break-all

    break-all er en indstilling, hvor linjeskift kan indsættes efter ethvert tegn efter behov. Især når der er lange ord eller URL'er, sker linjeskift ved tegnniveau for at undgå layoutforstyrrelser.

  • keep-all

    keep-all er en indstilling, der bruges især for asiatiske sprog (japansk, kinesisk, koreansk osv.). I denne indstilling bevares hele ordet, og der forekommer ikke brud midt i ord. For mellemrum-separerede sprog som engelsk anvendes normale ordgrænse linjebrud.

Dette eksempel viser tre forskellige word-break-indstillinger. Med word-break-normal bevares hele ordet og bryder ved ordgrænser, hvis det overstiger containerens bredde. Med word-break-break-all forekommer brud selv midt i ord. word-break-keep-all tillader naturlige brud for asiatiske sprog som japansk og ordgrænsede brud for engelsk.

word-break anvendelsesscenarier

Mobile enheder og responsivt design 

1@media (max-width: 600px) {
2  p {
3    word-break: break-all;
4  }
5}

På mobile enheder er skærmbredden begrænset, hvilket kan få tekst, herunder URL'er eller lange ord, til at overstige skærmbredden. I sådanne tilfælde giver anvendelse af word-break: break-all; linjeskift på tegngrundlag, så det passer til skærmens bredde og forbedrer læsbarheden.

hyphens ejendom 

 1p.no-hyphens {
 2    width: 200px;
 3    hyphens: none;
 4}
 5
 6p.manual-hyphens {
 7    width: 200px;
 8    hyphens: manual;
 9}
10
11p.auto-hyphens {
12    width: 200px;
13    hyphens: auto;
14}

  • hyphens-ejendommen bruges i CSS til at angive, hvordan orddeling (opdeling af ord med bindestreger) skal håndteres ved linjeskift i teksten. Ved at indstille denne ejendom korrekt kan du forbedre læsbarheden og udseendet af teksten. Orddeling er især nyttig, når lange ord skal brydes om.

  • Da reglerne for orddeling varierer efter sprog, afhænger denne egenskab af tekstens lokalitet.

Syntaks 

1element {
2    hyphens: none | manual | auto;
3}

hyphens-ejendommen kan indstilles til følgende værdier:.

  • none: Ingen orddeling anvendes. Ord vil normalt kun blive brudt ved ordets slutning.
  • manual: Orddeling anvendes manuelt. I dette tilfælde skal du angive orddelingspunkter manuelt inden for HTML. For eksempel kan du bruge &shy; (blød bindestreg).
  • auto: Browseren anvender automatisk orddeling på passende steder. I dette tilfælde skal dokumentets sprog (lang attribut) være angivet korrekt.

Noter

  • Vigtigheden af sproglige indstillinger: Når du bruger hyphens: auto; kræver korrekt orddeling, at lang-attributten i HTML-dokumentet er angivet korrekt.
  • Afhængighed af skrifttyper: Nogle skrifttyper er muligvis ikke egnede til orddeling.
  • Brug af orddelingsordbøger: Orddelingsregler afhænger af de ordbøger, som browseren bruger. Derfor fungerer det muligvis ikke som forventet for visse sprog.

Sammendrag

Ved at bruge hyphens-ejendommen korrekt kan du markant forbedre tekstlayoutet. Specielt for flersprogede websteder og mobilvenlige design kan korrekt brug af auto og manual forbedre brugeroplevelsen.

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

Tekst-relaterede CSS-egenskaberCSS-egenskaber til kodedisplay og citater