Articles
Introduksjon til CSS
CSS-egenskaper relatert til tekstavstand

CSS-egenskaper relatert til tekstavstand

Denne artikkelen forklarer CSS-egenskaper relatert til tekstavstand.

Du kan lære om bruken og hvordan du skriver egenskaper som line-height og word-spacing.

YouTube Video

Opprette HTML for 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 (Relatert til tekstmarginer)

Egenskapen line-height 

 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-egenskap som brukes til å sette linjeavstanden (linjehøyde). line-height spesifiserer den vertikale avstanden mellom linjer som brukes for å forbedre lesbarhet eller justere avstand som en del av designet.

Hovedbruk av line-height

Enhetsløse tall 
1p {
2    line-height: 1.5; /* 1.5 times the font size */
3}
  • Angi en høyde relativt til skriftstørrelsen. For eksempel, hvis du angir 1.5, settes linjehøyden til 1.5 ganger skriftstørrelsen. Denne metoden er nyttig for responsivt design.
Prosent 
1p {
2    line-height: 150%;
3}
  • Angi linjehøyden som en prosentandel av skriftstørrelsen. For eksempel, hvis du angir 150%, settes linjehøyden til 150% av skriftstørrelsen.
Faste verdier (px, em, rem, osv.) 
1p {
2    line-height: 20px;
3}
  • Angi linjehøyden i absolutte enheter. For eksempel kan du angi en konkret verdi som 20px, men det kan mangle fleksibilitet i responsivt design.
normal 
1p {
2    line-height: normal;
3}
  • Hvis du angir normal, brukes nettleserens standardinnstillinger for linjeavstand. Vanligvis vil det være omtrent 1.2 til 1.4 ganger skriftstørrelsen.

Eksempler på bruk av line-height

Lesbare avsnitt
  • En line-height på rundt 1.5 til 1.6 anbefales vanligvis for lesbarhet. Hvis linjeavstanden er for smal, vil teksten bli sammenpresset og vanskelig å lese, og hvis den er for bred, vil teksten føles fragmentert.
Overskriftsdesign
  • For overskrifter og titler, hvor teksten er større, kan linjeavstanden reduseres. Innstillinger som 1.1 eller 1.2 brukes ofte.

Sammendrag

  • line-height er en viktig egenskap for å forbedre både lesbarhet og utforming av tekst.
  • Å bruke relative verdier (tall eller prosent) gjør det enklere å tilpasse seg responsive design.
  • For overskrifter med stor tekst og avsnitt med mindre tekst, er det viktig å sette riktig linjeavstand for hver.

Å utnytte denne egenskapen kan gjøre teksten mer lesbar og forbedre dens designkvalitet.

letter-spacing-egenskapen 

 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-egenskap som brukes til å justere avstanden mellom tegn (bokstavavstand). Denne egenskapen kan brukes til å rydde opp i tekstdesignet, forbedre lesbarheten og oppnå spesifikke stiler.

I dette eksemplet er det spesifisert som følger.

  • normal: Standard bokstavavstand. Det er en standardverdi bestemt av nettleseren og skrifttypen.
  • 4px: Et eksempel på utvidet bokstavavstand. Legger til 4 piksler med avstand mellom hvert tegn.
  • -1px: Et eksempel på redusert bokstavavstand. Reduserer avstanden mellom hvert tegn med 1 piksel.

Hvordan bruke letter-spacing

Verdier med enheter 
1p.increased {
2    letter-spacing: 2px;  /* Increase letter spacing by 2px */
3}
4p.decreased {
5    letter-spacing: -1em;  /* Decrease letter spacing by 1em */
6}
  • Å angi en positiv verdi vil øke bokstavavstanden.
  • Å angi en negativ verdi vil redusere bokstavavstanden.
  • Enheter er vanligvis i px (piksler) eller em.
Standard: normal 
1p {
2    letter-spacing: normal;  /* Default letter spacing */
3}
  • Bruk standard bokstavavstand. Vanligvis brukes standard bokstavavstand som er definert av skriften.

Eksempler på bruk av letter-spacing

  • Forbedret lesbarhet: For små tekststørrelser eller svært komprimerte fonter kan du forbedre lesbarheten ved å øke letter-spacing.
  • Designjustering: Du kan justere bokstavavstanden for å visuelt fremheve designelementer som titler eller logoer.
  • Justering mellom bokstaver: Du kan justere avstand på bokstavnivå og ikke mellom ord. letter-spacing justerer avstanden mellom bokstaver, men bruk word-spacing for å øke avstanden mellom ord.
  • Designbalanse: Hvis du øker bokstavavstanden for mye, kan hele teksten se for strukket ut. Omvendt, hvis du reduserer den for mye, kan teksten bli trang og vanskelig å lese, så det er viktig å opprettholde en passende balanse.

Sammendrag

  • letter-spacing er en egenskap som justerer avstanden mellom bokstaver, og påvirker både design og lesbarhet.
  • Du kan øke avstanden med positive verdier og redusere den med negative verdier.
  • Det er effektivt for titler og spesifikke designelementer, men vær forsiktig så du ikke forringer lesbarheten.

Ved å bruke denne egenskapen kan du justere tekstens utseende og oppnå tiltalende design.

word-spacing-egenskapen 

 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-egenskap som kontrollerer avstanden mellom ord i en tekst. Riktig bruk av denne egenskapen kan forbedre visuell balanse og tekstens lesbarhet. word-spacing er spesielt nyttig i typografifokuserte design og i responsive designsituasjoner.

I dette eksemplet er det spesifisert som følger.

  • normal: Bruker standardavstanden mellom ord. Dette er nettleserens standardverdi.
  • 4px: Et eksempel på økt avstand mellom ord. Legger til 4 piksler margin mellom hvert ord.
  • -1px: Et eksempel på redusert avstand mellom ord. Reduserer avstanden mellom hvert ord med 1 piksel.
  • ord-og-bokstavavstand: Et eksempel på redusert avstand mellom ord og bokstaver. Reduserer avstanden mellom ord med 0.1em og mellom bokstaver med 0.05em sammenlignet med normalt.

Bruke positive og negative verdier

Å sette en positiv verdi for word-spacing vil utvide avstanden mellom ord. På den andre siden vil bruk av negative verdier redusere avstanden mellom ord. Negative verdier kan brukes for å fremheve visuelle effekter eller for å stramme inn bokstavavstanden av spesifikke designårsaker.

Forskjell fra letter-spacing

word-spacing er en egenskap som justerer avstanden mellom ord, mens letter-spacing justerer avstanden mellom bokstaver. Ved å kombinere disse egenskapene, kan du få mer presis kontroll over typografien i hele tekster.

Forsiktighetsregler og beste praksis

  • Overdreven justering av avstand: Overdrevent bruk av word-spacing kan føre til redusert lesbarhet. Spesielt for store eller for små mellomrom kan være krevende for brukerne, så moderate justeringer er viktige.
  • Responsivt design: Angivelse av relative verdier ved bruk av em eller rem er effektivt for responsivt design, fordi det sikrer riktig visning på ulike skjermstørrelser.
  • Overskriftsstiljustering: Ved å øke avstanden mellom ord i overskriftstekst kan du legge til visuell vekt. Dette lar deg tydeliggjøre innholdets hierarki og oppnå et sofistikert design.

word-break-egenskapen 

 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-egenskap som styrer hvordan tekst brytes når den overstiger bredden på containeren. Vanligvis bryter nettlesere linjer ved orddeling, men spesifikke innstillinger kan forbedre utseende og lesbarhet når lange ord eller URL-er er til stede.

Du kan angi følgende verdier for word-break-egenskapen.

  • normal

    normal er standardverdien. Når et ord overstiger bredden til containeren, vil det brytes ved orddeling. Denne innstillingen er vanlig i språk som engelsk, og linjebrudd oppstår ikke midt i ord.

  • break-all

    break-all er en innstilling der linjebrudd kan legges til etter ethvert tegn etter behov. Spesielt når lange ord eller URL-er er inkludert, oppstår linjebrudd på tegnnivå for å forhindre layoutforstyrrelser.

  • keep-all

    keep-all er en innstilling som spesielt brukes for asiatiske språk (japansk, kinesisk, koreansk, osv.). I denne innstillingen bevares hele ordet, og det oppstår ingen linjebrudd midt i ord. Men for språk som bruker mellomrom som avgrensning, som engelsk, brukes vanlige linjebrudd ved ordgrense.

Dette eksempelet viser tre forskjellige word-break-innstillinger. Med word-break-normal bevares hele ordet og brytes ved orddeling hvis det overstiger containerens bredde. Med word-break-break-all oppstår linjebrudd selv midt i ord. word-break-keep-all tillater naturlige linjebrudd for asiatiske språk som japansk og linjebrudd ved orddeling for engelsk.

word-break Bruksområder

Mobilenheter og responsiv design 

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

På mobilenheter er skjermbredden begrenset, noe som kan føre til at tekst, inkludert URL-er eller lange ord, overstiger skjermbredden. I slike tilfeller tillater bruk av word-break: break-all; linjebrudd på tegnnivå for å passe til skjermbredden, noe som forbedrer lesbarheten.

hyphens-egenskap 

 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-egenskapen brukes i CSS for å spesifisere hvordan orddeling (å dele ord med bindestrek) skal håndteres ved linjeskift i tekst. Ved å sette denne egenskapen riktig, kan du forbedre lesbarheten og utseendet til teksten. Orddeling er spesielt nyttig når lange ord må brytes opp.

  • Ettersom orddelingsregler varierer mellom språk, avhenger denne egenskapen av tekstens språklokalisering.

Syntaks 

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

hyphens-egenskapen kan settes til følgende verdier:.

  • none: Ingen orddeling blir brukt. Ord vil vanligvis brytes kun på slutten av ordet.
  • manual: Orddeling legges til manuelt. I dette tilfellet må du spesifisere orddelingspunkter manuelt i HTML. For eksempel kan du bruke &shy; (myk bindestrek).
  • auto: Nettleseren legger automatisk til orddeling på passende steder. I dette tilfellet må dokumentets språk (lang-attributt) være riktig spesifisert.

Notater

  • Viktigheten av språkinnstillinger: Når du bruker hyphens: auto;, kreves det at lang-attributtet i HTML-dokumentet er korrekt satt for riktig orddeling.
  • Fontavhengighet: Noen skrifttyper kan være uegnet for orddeling.
  • Bruk av orddelingsordbøker: Orddelingsregler avhenger av ordbøkene som brukes av nettleseren. Derfor kan den fungere annerledes eller ikke fungere som forventet for enkelte språk.

Sammendrag

Ved å bruke hyphens-egenskapen riktig, kan du betydelig forbedre tekstoppsettet. Spesielt for flerspråklige nettsider og mobilvennlige design, kan riktig bruk av auto og manual forbedre brukeropplevelsen.

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

Tekstrelaterte CSS-egenskaperCSS-egenskaper for kodedisplay og sitater