Articles
Введение в CSS
Свойства CSS, связанные с интервалом текста

Свойства CSS, связанные с интервалом текста

Эта статья объясняет свойства CSS, связанные с интервалами текста.

Вы узнаете о применении и способах написания таких свойств, как line-height и word-spacing.

YouTube Video

Создание HTML для предварительного просмотра

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>

Типографика (Связанное с интервалами текста)

Свойство 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 — это свойство CSS, используемое для установки интервала между строками (высоты строки). line-height определяет вертикальное пространство между строками, используется для улучшения читаемости или корректировки интервалов как часть дизайна.

Основные применения line-height

Безразмерные числа 
1p {
2    line-height: 1.5; /* 1.5 times the font size */
3}
  • Укажите высоту относительно размера шрифта. Например, указание 1.5 устанавливает высоту строки в 1.5 раза больше размера шрифта. Этот метод полезен для адаптивного дизайна.
Процентное значение 
1p {
2    line-height: 150%;
3}
  • Укажите высоту строки в процентах от размера шрифта. Например, указание 150% устанавливает высоту строки равной 150% от размера шрифта.
Фиксированные значения (px, em, rem и др.) 
1p {
2    line-height: 20px;
3}
  • Укажите высоту строки в абсолютных единицах. Например, можно указать конкретное значение, такое как 20px, но это может быть недостаточно гибко для адаптивного дизайна.
normal 
1p {
2    line-height: normal;
3}
  • Указание normal применяет настройки интервала строки по умолчанию для браузера. Как правило, это будет примерно 1.2–1.4 раза больше размера шрифта.

Примеры использования line-height

Читаемые абзацы
  • Рекомендуется значение line-height около 1.5 или 1.6 для улучшения читаемости. Если межстрочный интервал слишком мал, текст будет выглядеть сжатым и трудным для чтения. Если он слишком велик, текст будет казаться разрозненным.
Дизайн заголовков
  • Для заголовков и титулов, где текст крупнее, межстрочный интервал можно уменьшить. Часто используются значения, такие как 1.1 или 1.2.

Резюме

  • line-height — это важное свойство, которое улучшает как читаемость, так и дизайн текста.
  • Использование относительных значений (чисел или процентов) упрощает адаптацию к адаптивному дизайну.
  • Для заголовков с крупным текстом и параграфов с мелким текстом важно установить подходящий межстрочный интервал для каждого.

Использование этого свойства может сделать текст более читабельным и улучшить его качество дизайна.

Свойство letter-spacing 

 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 — это CSS-свойство, используемое для регулировки расстояния между символами (интервал между буквами). Это свойство можно использовать для упорядочивания дизайна текста, повышения читаемости и создания определенных стилей.

В этом примере указано следующее.

  • normal: Значение по умолчанию для расстояния между буквами. Это стандартное значение, определяемое браузером и шрифтом.
  • 4px: Пример увеличенного интервала между буквами. Добавляет по 4 пикселя расстояния между каждым символом.
  • -1px: Пример уменьшенного интервала между буквами. Уменьшает расстояние между каждыми символами на 1 пиксель.

Как использовать letter-spacing

Значения с единицами измерения 
1p.increased {
2    letter-spacing: 2px;  /* Increase letter spacing by 2px */
3}
4p.decreased {
5    letter-spacing: -1em;  /* Decrease letter spacing by 1em */
6}
  • Установка положительного значения увеличит интервал между буквами.
  • Установка отрицательного значения уменьшит интервал между буквами.
  • Единицы измерения обычно указываются в px (пикселях) или em.
По умолчанию: normal 
1p {
2    letter-spacing: normal;  /* Default letter spacing */
3}
  • Используйте стандартный межбуквенный интервал. Обычно применяется стандартный межбуквенный интервал, определённый шрифтом.

Примеры использования letter-spacing

  • Улучшение читаемости: Для маленьких размеров шрифта или чрезмерно сжатых шрифтов вы можете улучшить читаемость, увеличив letter-spacing.
  • Настройка дизайна: Вы можете настроить межбуквенный интервал, чтобы визуально выделить элементы дизайна, такие как заголовки или логотипы.
  • Регулировка между словами: Вы можете настроить интервал на уровне букв, а не между словами. letter-spacing регулирует расстояние между буквами, но используйте word-spacing, чтобы увеличить интервал между словами.
  • Баланс дизайна: Если вы слишком увеличите межбуквенный интервал, весь текст может выглядеть слишком растянутым. Наоборот, если уменьшить его слишком сильно, текст может стать сжатым и трудночитаемым, поэтому важно соблюдать баланс.

Резюме

  • letter-spacing — это свойство, которое регулирует расстояние между буквами, влияя как на дизайн, так и на читаемость.
  • Вы можете увеличить интервал, используя положительные значения, и уменьшить его, используя отрицательные значения.
  • Это эффективно для заголовков и отдельных элементов дизайна, но будьте осторожны, чтобы не ухудшить читаемость.

Используя это свойство, вы можете настроить внешний вид текста и достичь привлекательного дизайна.

Свойство word-spacing 

 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 — это CSS-свойство, которое управляет расстоянием между словами в тексте. Правильное использование этого свойства может улучшить визуальный баланс и читаемость текста. word-spacing особенно полезен в типографически ориентированных дизайнах и в сценариях адаптивного дизайна.

В этом примере указано следующее.

  • normal: Применяет стандартный интервал между словами. Это начальное значение, установленное браузером.
  • 4px: Пример увеличенного интервала между словами. Добавляет по 4 пикселя между каждым словом.
  • -1px: Пример уменьшенного интервала между словами. Уменьшает расстояние между каждым словом на 1 пиксель.
  • word-and-letter-spacing: Пример уменьшенного интервала между словами и буквами. Уменьшает интервал между словами на 0.1em, а между буквами на 0.05em по сравнению с нормальным значением.

Использование положительных и отрицательных значений

Задание положительного значения для word-spacing увеличит интервал между словами. С другой стороны, использование отрицательных значений уменьшает интервалы между словами. Отрицательные значения могут использоваться для акцентирования визуальных эффектов или уменьшения интервала между буквами по определённым дизайнерским причинам.

Разница с letter-spacing

word-spacing — это свойство, регулирующее интервал между словами, тогда как letter-spacing регулирует интервал между буквами. Комбинируя эти свойства, вы можете более точно контролировать типографику всего текста.

Предостережения и лучшие практики

  • Избыточная регулировка интервалов: Чрезмерное использование word-spacing может снизить читаемость. Особенно слишком большие или слишком маленькие интервалы могут быть неудобны для пользователей, поэтому важно делать умеренные корректировки.
  • Адаптивный дизайн: Указание относительных значений с использованием em или rem эффективно для адаптивного дизайна, так как это обеспечивает корректное отображение на различных размерах экранов.
  • Регулировка стиля заголовков: Расширяя интервал между словами в тексте заголовка, вы можете добавить визуальный акцент. Это позволяет уточнить иерархию контента и достичь изысканного дизайна.

Свойство 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 — это CSS-свойство, которое управляет переносом текста, когда он превышает ширину контейнера. Обычно браузеры переносят строки на границах слов, но специальные настройки могут улучшить внешний вид и читабельность при наличии длинных слов или URL-адресов.

Для свойства word-break можно указать следующие значения.

  • normal

    normal — это значение по умолчанию. Когда слово превышает ширину контейнера, оно будет перенесено на границе слов. Эта настройка характерна для таких языков, как английский, и разрывы не происходят посередине слов.

  • break-all

    break-all — это настройка, при которой разрывы строки могут быть вставлены после любого символа, при необходимости. Особенно при наличии длинных слов или URL-адресов разрывы строки происходят на уровне символов, чтобы избежать нарушения макета.

  • keep-all

    keep-all — это настройка, используемая преимущественно для азиатских языков (японского, китайского, корейского и т. д.). При этой настройке все слово сохраняется, и разрывы не происходят посередине слов. Однако для языков с разделением слов пробелами, таких как английский, применяются обычные разрывы строк на границах слов.

Этот пример демонстрирует три разных настройки свойства word-break. При использовании word-break-normal все слово сохраняется и переносится на границах слов, если оно превышает ширину контейнера. При использовании word-break-break-all разрывы происходят даже внутри слов. word-break-keep-all позволяет естественным переносам для азиатских языков, таких как японский, и переносам по границам слов для английского.

Примеры использования свойства word-break

Мобильные устройства и адаптивный дизайн 

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

На мобильных устройствах ширина экрана ограничена, что может привести к тому, что текст, включая URL-адреса или длинные слова, превысит ширину экрана. В таких случаях применение word-break: break-all; позволяет переносить строки на уровне символов, чтобы текст помещался в ширину экрана, улучшая читаемость.

Свойство hyphens 

 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 используется в CSS, чтобы указать, как должна выполняться перенос слов (разделение слов дефисами) при разрыве строк текста. При правильной настройке этого свойства можно улучшить читаемость и внешний вид текста. Перенос особенно полезен, когда длинные слова необходимо разбить.

  • Поскольку правила переноса зависят от языка, это свойство зависит от локали текста.

Синтаксис 

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

Свойству hyphens можно присвоить следующие значения:.

  • none: Переносы не применяются. Слова обычно разрываются только в конце слова.
  • manual: Переносы применяются вручную. В этом случае точки переноса нужно указывать вручную в HTML. Например, можно использовать &shy; (мягкий перенос).
  • auto: Браузер автоматически выполняет переносы в подходящих местах. В этом случае язык документа (атрибут lang) должен быть указан правильно.

Примечания

  • Важность настройки языка: При использовании hyphens: auto; для корректного переноса необходимо правильно указать атрибут lang в HTML-документе.
  • Зависимость от шрифта: Некоторые шрифты могут не подходить для переноса.
  • Использование словарей переноса: Правила переноса зависят от словарей, используемых браузером. Поэтому в некоторых языках это может работать не так, как ожидалось.

Резюме

При правильном использовании свойства hyphens можно значительно улучшить макет текста. Особенно для многоязычных сайтов и адаптивного дизайна использование auto и manual может улучшить пользовательский опыт.

Вы можете следовать этой статье, используя Visual Studio Code на нашем YouTube-канале. Пожалуйста, также посмотрите наш YouTube-канал.

YouTube Video

Свойства CSS, связанные с текстомCSS свойства для отображения кода и цитат