Articles
Einführung in CSS
CSS-Eigenschaften im Zusammenhang mit Textabstand

CSS-Eigenschaften im Zusammenhang mit Textabstand

Dieser Artikel erklärt CSS-Eigenschaften im Zusammenhang mit Textabständen.

Sie können lernen, wie man Eigenschaften wie line-height und word-spacing verwendet und schreibt.

YouTube Video

Erstellen von HTML für die Vorschau

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>

Typografie (Textmargen-bezogen)

line-height Eigenschaft 

 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 ist eine CSS-Eigenschaft, die verwendet wird, um den Zeilenabstand (Zeilenhöhe) festzulegen. line-height gibt den vertikalen Abstand zwischen den Zeilen an, der verwendet wird, um die Lesbarkeit zu verbessern oder den Abstand als Teil des Designs anzupassen.

Hauptverwendungen von line-height

Zahlen ohne Einheit 
1p {
2    line-height: 1.5; /* 1.5 times the font size */
3}
  • Geben Sie eine Höhe relativ zur Schriftgröße an. Zum Beispiel setzt die Angabe von 1.5 die Zeilenhöhe auf das 1,5-fache der Schriftgröße. Diese Methode ist nützlich für responsives Design.
Prozentangabe 
1p {
2    line-height: 150%;
3}
  • Geben Sie die Zeilenhöhe als Prozentsatz der Schriftgröße an. Zum Beispiel setzt die Angabe von 150% die Zeilenhöhe auf 150% der Schriftgröße.
Feste Werte (px, em, rem, etc.) 
1p {
2    line-height: 20px;
3}
  • Geben Sie die Zeilenhöhe in absoluten Einheiten an. Zum Beispiel können Sie einen konkreten Wert wie 20px angeben, aber dies kann an Flexibilität im responsiven Design fehlen.
normal 
1p {
2    line-height: normal;
3}
  • Die Angabe von normal wendet die standardmäßigen Zeilenabstandseinstellungen des Browsers an. In der Regel liegt der Wert bei etwa dem 1,2- bis 1,4-fachen der Schriftgröße.

Beispiele für die Verwendung von line-height

Lesbare Absätze
  • Eine line-height von etwa 1.5 bis 1.6 wird normalerweise für eine gute Lesbarkeit empfohlen. Wenn der Zeilenabstand zu eng ist, wirkt der Text gedrängt und schwer lesbar, und wenn er zu weit ist, wirkt der Text zusammenhanglos.
Überschriftengestaltung
  • Für Überschriften und Titel, bei denen der Text größer ist, kann der Zeilenabstand reduziert werden. Einstellungen wie 1.1 oder 1.2 werden oft verwendet.

Zusammenfassung

  • line-height ist eine wichtige Eigenschaft, um sowohl die Lesbarkeit als auch das Design von Texten zu verbessern.
  • Die Verwendung relativer Werte (Zahlen oder Prozentsätze) erleichtert die Anpassung an responsive Designs.
  • Für Überschriften mit großem Text und Absätze mit kleinerem Text ist es entscheidend, für beide einen angemessenen Zeilenabstand festzulegen.

Die Nutzung dieser Eigenschaft kann die Lesbarkeit von Texten verbessern und die Gestaltung insgesamt hochwertiger machen.

letter-spacing Eigenschaft 

 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 ist eine CSS-Eigenschaft, die verwendet wird, um den Abstand zwischen Zeichen (Buchstabenabstand) anzupassen. Diese Eigenschaft kann verwendet werden, um das Textdesign aufzufrischen, die Lesbarkeit zu verbessern und bestimmte Stile zu erreichen.

In diesem Beispiel wird es wie folgt angegeben.

  • normal: Der standardmäßige Buchstabenabstand. Es ist ein Standardwert, der vom Browser und der Schriftart festgelegt wird.
  • 4px: Ein Beispiel für erweiterten Buchstabenabstand. Fügt 4 Pixel Abstand zwischen jedem Zeichen hinzu.
  • -1px: Ein Beispiel für eingeengten Buchstabenabstand. Reduziert den Abstand zwischen jedem Zeichen um 1 Pixel.

Verwendung von letter-spacing

Werte mit Einheiten 
1p.increased {
2    letter-spacing: 2px;  /* Increase letter spacing by 2px */
3}
4p.decreased {
5    letter-spacing: -1em;  /* Decrease letter spacing by 1em */
6}
  • Das Festlegen eines positiven Wertes erhöht den Buchstabenabstand.
  • Das Festlegen eines negativen Wertes verringert den Buchstabenabstand.
  • Einheiten werden typischerweise in px (Pixel) oder em angegeben.
Standard: normal 
1p {
2    letter-spacing: normal;  /* Default letter spacing */
3}
  • Verwenden Sie den Standard-Buchstabenabstand. Normalerweise wird der im Schriftart festgelegte Standard-Buchstabenabstand angewendet.

Beispiele für die Verwendung von letter-spacing

  • Verbesserte Lesbarkeit: Für kleine Schriftgrößen oder zu stark komprimierte Schriftarten kann die Lesbarkeit durch Erhöhung des Buchstabenabstands verbessert werden.
  • Designanpassung: Sie können den Buchstabenabstand anpassen, um Designelemente wie Titel oder Logos visuell hervorzuheben.
  • Anpassung zwischen Wörtern: Sie können den Abstand auf Buchstabenebene anpassen, anstatt zwischen Wörtern. Buchstabenabstand passt den Abstand auf Buchstabenebene an, aber verwenden Sie Wortabstand, um den Abstand zwischen Wörtern zu erweitern.
  • Designbalance: Wenn Sie den Buchstabenabstand zu stark erhöhen, könnte der gesamte Text zu gestreckt erscheinen. Umgekehrt kann der Text beengt und schwer lesbar werden, wenn Sie ihn zu stark verringern. Daher ist es wichtig, ein angemessenes Gleichgewicht zu bewahren.

Zusammenfassung

  • Buchstabenabstand ist eine Eigenschaft, die den Abstand zwischen Buchstaben anpasst und sowohl das Design als auch die Lesbarkeit beeinflusst.
  • Sie können den Abstand mit positiven Werten erhöhen und mit negativen Werten verringern.
  • Es ist wirksam für Titel und spezifische Designelemente, aber achten Sie darauf, die Lesbarkeit nicht zu beeinträchtigen.

Durch die Verwendung dieser Eigenschaft können Sie das Erscheinungsbild von Text anpassen und attraktive Designs erzielen.

word-spacing-Eigenschaft 

 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}

Wortabstand ist eine CSS-Eigenschaft, die den Abstand zwischen Wörtern in einem Text steuert. Der richtige Einsatz dieser Eigenschaft kann das visuelle Gleichgewicht und die Lesbarkeit des Textes verbessern. Wortabstand ist besonders nützlich in typografieorientierten Designs und in Szenarien des responsiven Designs.

In diesem Beispiel wird es wie folgt angegeben.

  • normal: Wendet den Standard-Wortabstand an. Dies ist der anfängliche Wert des Browsers.
  • 4px: Ein Beispiel für erhöhten Wortabstand. Fügt zwischen jedem Wort 4 Pixel Abstand hinzu.
  • -1px: Ein Beispiel für verringerten Wortabstand. Verringert den Abstand zwischen jedem Wort um 1 Pixel.
  • wort-und-buchstabenabstand: Ein Beispiel für verringerten Wort- und Buchstabenabstand. Verringert den Abstand zwischen Wörtern um 0.1em und zwischen Buchstaben um 0.05em im Vergleich zu normal.

Verwendung von positiven und negativen Werten

Das Festlegen eines positiven Wertes für Wortabstand erweitert den Wortabstand. Andererseits verengen negative Werte die Abstände zwischen Wörtern. Negative Werte können verwendet werden, um visuelle Effekte hervorzuheben oder den Buchstabenabstand aus bestimmten gestalterischen Gründen zu verringern.

Unterschied zu letter-spacing

word-spacing ist eine Eigenschaft, die den Abstand zwischen Wörtern anpasst, während letter-spacing den Abstand zwischen Buchstaben anpasst. Durch die Kombination dieser Eigenschaften können Sie die Typografie ganzer Texte präziser steuern.

Vorsichtsmaßnahmen und bewährte Verfahren

  • Übermäßige Abstandsänderung: Der übermäßige Einsatz von word-spacing kann die Lesbarkeit verringern. Besonders zu große oder zu kleine Abstände können für Benutzer anstrengend sein, was moderate Anpassungen wichtig macht.
  • Responsive Design: Die Angabe relativer Werte mit em oder rem ist effektiv für Responsive Design, da sie eine korrekte Anzeige auf verschiedenen Bildschirmgrößen gewährleistet.
  • Anpassung des Überschrift-Stils: Durch das Vergrößern des Wortabstands in Überschriften können Sie visuelle Betonung hinzufügen. Dies ermöglicht es Ihnen, die Hierarchie des Inhalts zu verdeutlichen und ein anspruchsvolles Design zu erzielen.

word-break Eigenschaft 

 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 ist eine CSS-Eigenschaft, die steuert, wie Text umbrochen wird, wenn er die Breite des Containers überschreitet. Normalerweise brechen Browser Zeilen an Wortgrenzen, aber spezifische Einstellungen können das Erscheinungsbild und die Lesbarkeit verbessern, wenn lange Wörter oder URLs vorhanden sind.

Sie können die folgenden Werte für die Eigenschaft word-break angeben.

  • normal

    normal ist der Standardwert. Wenn ein Wort die Breite des Containers überschreitet, wird es an Wortgrenzen umbrochen. Diese Einstellung ist in Sprachen wie Englisch üblich, und Umbrüche treten nicht in der Mitte von Wörtern auf.

  • break-all

    break-all ist eine Einstellung, bei der Zeilenumbrüche bei Bedarf nach jedem Zeichen eingefügt werden können. Insbesondere bei langen Wörtern oder URLs treten Zeilenumbrüche auf Zeichenebene auf, um Layoutstörungen zu vermeiden.

  • keep-all

    keep-all ist eine Einstellung, die insbesondere für asiatische Sprachen (Japanisch, Chinesisch, Koreanisch usw.) verwendet wird. Bei dieser Einstellung bleibt das gesamte Wort erhalten, und es treten keine Umbrüche in der Mitte von Wörtern auf. Für Sprachen mit Leerzeichen als Trennzeichen, wie Englisch, werden jedoch normale Zeilenumbrüche an Wortgrenzen angewendet.

Dieses Beispiel zeigt drei verschiedene word-break-Einstellungen. Mit word-break-normal bleibt das gesamte Wort erhalten und wird an Wortgrenzen umbrochen, wenn es die Breite des Containers überschreitet. Mit word-break-break-all treten Umbrüche sogar in der Mitte von Wörtern auf. word-break-keep-all ermöglicht natürliche Umbrüche für asiatische Sprachen wie Japanisch und Umbrüche an Wortgrenzen für Englisch.

word-break Anwendungsszenarien

Mobile Geräte und Responsives Design 

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

Auf Mobilgeräten ist die Bildschirmbreite begrenzt, wodurch Text, einschließlich URLs oder langer Wörter, die Bildschirmbreite überschreiten kann. In solchen Fällen ermöglicht die Anwendung von word-break: break-all; Zeilenumbrüche auf Zeichenebene, um die Bildschirmbreite anzupassen und die Lesbarkeit zu verbessern.

hyphens-Eigenschaft 

 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}

  • Die hyphens-Eigenschaft wird in CSS verwendet, um festzulegen, wie die Silbentrennung (das Aufteilen von Wörtern mit Bindestrichen) beim Zeilenumbruch behandelt werden soll. Durch die passende Einstellung dieser Eigenschaft können Sie die Lesbarkeit und das Erscheinungsbild des Textes verbessern. Die Silbentrennung ist besonders nützlich, wenn lange Wörter umbrochen werden müssen.

  • Da Silbentrennungsregeln je nach Sprache unterschiedlich sind, hängt diese Eigenschaft vom Gebietsschema des Textes ab.

Syntax 

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

Die hyphens-Eigenschaft kann auf folgende Werte gesetzt werden:.

  • none: Es wird keine Silbentrennung angewendet. Wörter brechen typischerweise nur am Ende des Wortes.
  • manual: Die Silbentrennung wird manuell angewendet. In diesem Fall müssen Sie die Trennpunkte manuell im HTML definieren. Zum Beispiel können Sie &shy; (weicher Trennstrich) verwenden.
  • auto: Der Browser wendet die Silbentrennung automatisch an geeigneten Stellen an. In diesem Fall muss die Sprache des Dokuments (das lang-Attribut) korrekt angegeben werden.

Notizen

  • Bedeutung der Spracheinstellungen: Bei der Verwendung von hyphens: auto; erfordert eine korrekte Silbentrennung die richtige Einstellung des lang-Attributs im HTML-Dokument.
  • Abhängigkeit von Schriftarten: Einige Schriftarten sind möglicherweise nicht für die Silbentrennung geeignet.
  • Verwendung von Silbentrennung-Wörterbüchern: Die Regeln für die Silbentrennung hängen von den vom Browser verwendeten Wörterbüchern ab. Daher funktioniert es möglicherweise nicht wie erwartet für bestimmte Sprachen.

Zusammenfassung

Durch die korrekte Nutzung der hyphens-Eigenschaft können Sie das Textlayout erheblich verbessern. Insbesondere bei mehrsprachigen Websites und mobilfreundlichen Designs können die richtige Verwendung von auto und manual die Benutzererfahrung verbessern.

Sie können den obigen Artikel mit Visual Studio Code auf unserem YouTube-Kanal verfolgen. Bitte schauen Sie sich auch den YouTube-Kanal an.

YouTube Video

Textbezogene CSS-EigenschaftenCSS-Eigenschaften für die Anzeige von Code und Zitaten