Articles
Introduktion till CSS
CSS-egenskaper relaterade till textavstånd

CSS-egenskaper relaterade till textavstånd

Den här artikeln förklarar CSS-egenskaper relaterade till textavstånd.

Du kan lära dig om användningen och hur man skriver egenskaper som line-height och word-spacing.

YouTube Video

Skapa HTML för förhandsgranskning

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 (Textmarginalrelaterad)

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 är en CSS-egenskap som används för att ställa in radavståndet (radhöjden). line-height anger det vertikala utrymmet mellan rader, används för att förbättra läsbarheten eller justera avståndet som en del av designen.

Huvudsakliga användningar av line-height

Enhetsfria tal 
1p {
2    line-height: 1.5; /* 1.5 times the font size */
3}
  • Ange en höjd i förhållande till teckenstorleken. Till exempel ställer 1.5 in radavståndet till 1,5 gånger teckenstorleken. Den här metoden är användbar för responsiv design.
Procent 
1p {
2    line-height: 150%;
3}
  • Ange radavståndet som en procentandel av teckenstorleken. Till exempel ställer 150% in radavståndet till 150 % av teckenstorleken.
Fasta värden (px, em, rem, etc.) 
1p {
2    line-height: 20px;
3}
  • Ange radavståndet i absoluta enheter. Till exempel kan du ange ett konkret värde som 20px, men det kan sakna flexibilitet i responsiv design.
normal 
1p {
2    line-height: normal;
3}
  • Om du anger normal tillämpas webbläsarens standardinställningar för radavstånd. Vanligtvis kommer det att vara cirka 1,2 till 1,4 gånger teckenstorleken.

Exempel på användning av line-height

Läsvänliga stycken
  • En line-height på cirka 1.5 till 1.6 rekommenderas vanligtvis för bättre läsbarhet. Om radavståndet är för smalt kommer texten att kännas trång och svårläst, och om det är för stort kommer texten att kännas osammanhängande.
Utformning av rubriker
  • För rubriker och titlar, där texten är större, kan radavståndet minskas. Inställningar som 1.1 eller 1.2 används ofta.

Sammanfattning

  • line-height är en viktig egenskap för att förbättra både läsbarheten och textens design.
  • Att använda relativa värden (siffror eller procent) gör det enklare att anpassa sig till responsiv design.
  • För rubriker med stor text och stycken med mindre text är det viktigt att ställa in ett lämpligt radavstånd för varje.

Att utnyttja denna egenskap kan göra textens utseende mer läsbart och förbättra dess 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 är en CSS-egenskap som används för att justera avståndet mellan tecken (bokstavsavstånd). Denna egenskap kan användas för att städa upp textdesignen, förbättra läsbarheten och skapa specifika stilar.

I det här exemplet specifieras det enligt följande.

  • normal: Standardavståndet mellan bokstäver. Det är ett standardvärde som bestäms av webbläsaren och typsnittet.
  • 4px: Ett exempel på utökat bokstavsavstånd. Lägger till 4 pixlar av utrymme mellan varje tecken.
  • -1px: Ett exempel på minskat bokstavsavstånd. Minskar 1 pixel av utrymme mellan varje tecken.

Hur man använder letter-spacing

Värden 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}
  • Att ställa in ett positivt värde ökar bokstavsavståndet.
  • Att ställa in ett negativt värde minskar bokstavsavståndet.
  • Enheter anges vanligtvis i px (pixlar) eller em.
Standard: normal 
1p {
2    letter-spacing: normal;  /* Default letter spacing */
3}
  • Använd standardbokstavsavståndet. Normalt används det standardbokstavsavstånd som definieras av teckensnittet.

Exempel på användning av letter-spacing

  • Förbättrad läsbarhet: För små teckenstorlekar eller för tätt kondenserade teckensnitt kan du förbättra läsbarheten genom att öka letter-spacing.
  • Designjustering: Du kan justera bokstavsavståndet för att visuellt framhäva designelement såsom titlar eller logotyper.
  • Justering mellan bokstäver: Du kan justera avstånd på bokstavsnivå istället för mellan ord. letter-spacing justerar avstånd på bokstavsnivå, men använd word-spacing för att öka avståndet mellan ord.
  • Designbalans: Om du ökar bokstavsavståndet för mycket kan hela texten se för utdragen ut. Om du däremot minskar det för mycket kan texten bli hopträngd och svårläst, så det är viktigt att upprätthålla en lämplig balans.

Sammanfattning

  • letter-spacing är en egenskap som justerar avståndet mellan bokstäver och påverkar både design och läsbarhet.
  • Du kan öka avståndet med positiva värden och minska det med negativa värden.
  • Det är effektivt för titlar och specifika designelement, men var försiktig så att du inte äventyrar läsbarheten.

Genom att använda denna egenskap kan du justera textens utseende och skapa attraktiva designer.

word-spacing-egenskap 

 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 är en CSS-egenskap som reglerar avståndet mellan ord i en text. Rätt användning av denna egenskap kan förbättra den visuella balansen och textens läsbarhet. word-spacing är särskilt användbart i typografifokuserade designer och responsiva designscenarier.

I det här exemplet specifieras det enligt följande.

  • normal: Använder standardordavstånd. Detta är webbläsarens initialvärde.
  • 4px: Ett exempel på ökat ordavstånd. Lägger till 4 pixlars marginal mellan varje ord.
  • -1px: Ett exempel på minskat ordavstånd. Minskar avståndet mellan varje ord med 1 pixel.
  • ord-och-bokstavsavstånd: Ett exempel på minskat ord- och bokstavsavstånd. Minskar avståndet mellan ord med 0.1em och mellan bokstäver med 0.05em jämfört med normalt.

Att använda positiva och negativa värden

Att sätta ett positivt värde för word-spacing ökar avståndet mellan orden. Å andra sidan minskar negativa värden avståndet mellan orden. Negativa värden kan användas för att framhäva visuella effekter eller för att minska bokstavsavståndet av särskilda designskäl.

Skillnad jämfört med letter-spacing

word-spacing är en egenskap som justerar avståndet mellan ord, medan letter-spacing justerar avståndet mellan bokstäver. Genom att kombinera dessa egenskaper kan du få mer exakt kontroll över typografin av hela texter.

Försiktighetsåtgärder och bästa praxis

  • Överdriven justering av avstånd: Överanvändning av word-spacing kan leda till minskad läsbarhet. Särskilt för stora eller för små avstånd kan vara stressande för användare, vilket gör måttliga justeringar viktiga.
  • Responsiv design: Att använda relativa värden som em eller rem är effektivt för responsiv design eftersom det säkerställer korrekt visning på olika skärmstorlekar.
  • Justering av rubrikstil: Genom att öka avståndet mellan orden i rubriktext kan du lägga till visuell betoning. Detta gör att du kan tydliggöra innehållets hierarki och uppnå en sofistikerad design.

Egenskapen word-break 

 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 är en CSS-egenskap som styr hur text bryts när den överskrider behållarens bredd. Normalt bryter webbläsare rader vid ordgränser, men specifika inställningar kan förbättra utseendet och läsbarheten när långa ord eller URL:er finns med.

Du kan ange följande värden för word-break-egenskapen.

  • normal

    normal är standardvärdet. Om ett ord överskrider behållarens bredd bryts det vid ordgränser. Denna inställning är vanlig i språk som engelska, och brytningar sker inte mitt i orden.

  • break-all

    break-all är en inställning där radbrytningar kan införas efter vilket tecken som helst vid behov. Särskilt när långa ord eller URL:er ingår sker radbrytningar på teckennivå för att förhindra layoutstörningar.

  • keep-all

    keep-all är en inställning som används särskilt för asiatiska språk (japanska, kinesiska, koreanska, etc.). I denna inställning bevaras hela ordet och inga brytningar sker mitt i orden. För språk som använder mellanslag för att separera ord, som engelska, appliceras normala radbrytningar vid ordgränser.

Detta exempel visar tre olika inställningar för word-break. Med word-break-normal bevaras hela ordet och det bryts vid ordgränser om det överskrider behållarens bredd. Med word-break-break-all sker brytningar även mitt i ord. word-break-keep-all tillåter naturliga brytningar för asiatiska språk som japanska och radbrytningar vid ordgränser för engelska.

Användningsscenarier för word-break

Mobila enheter och responsiv design 

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

På mobila enheter är skärmbredden begränsad, vilket kan göra att text inklusive URL:er eller långa ord överskrider skärmbredden. I sådana fall tillåts radbrytningar på teckennivå genom att tillämpa word-break: break-all; för att passa skärmbredden, vilket förbättrar läsbarheten.

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 används i CSS för att ange hur avstavning (delning av ord med bindestreck) ska hanteras vid radbrytning. Genom att ställa in denna egenskap på rätt sätt kan du förbättra textens läsbarhet och utseende. Avstavning är särskilt användbart när långa ord behöver brytas.

  • Eftersom avstavningsregler varierar mellan olika språk, är denna egenskap beroende av textens språkområde.

Syntax 

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

hyphens-egenskapen kan ställas in på följande värden:.

  • none: Ingen avstavning tillämpas. Ord kommer vanligtvis bara att brytas vid slutet av ordet.
  • manual: Avstavning tillämpas manuellt. I detta fall behöver du manuellt ange avstagningspunkter i HTML:en. Till exempel kan du använda &shy; (mjuk avstavning).
  • auto: Webbläsaren tillämpar automatiskt avstavning på lämpliga positioner. I detta fall måste dokumentets språk (lang-attributet) vara korrekt angivet.

Anteckningar

  • Vikten av språkinställningar: När du använder hyphens: auto; krävs det att lang-attributet i HTML-dokumentet är korrekt inställt för att avstavningen ska fungera korrekt.
  • Typsnittsberoende: Vissa typsnitt kanske inte är lämpliga för avstavning.
  • Användning av avstavningsordböcker: Avstavningsregler beror på de ordböcker som webbläsaren använder. Därför kanske det inte fungerar som förväntat för vissa språk.

Sammanfattning

Genom att använda hyphens-egenskapen på rätt sätt kan du avsevärt förbättra textens layout. Särskilt för flerspråkiga webbsidor och mobilvänliga designer kan en korrekt användning av auto och manual förbättra användarupplevelsen.

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

Textrelaterade CSS-egenskaperCSS-egenskaper för kodvisning och citat