Интервалы текста CSS
CSS имеет несколько свойств для управления интервалами текста.
В этой главе вы узнаете о: text-indent, letter-spacing, line-height, word-spacing и white-space.
Отступ текста CSS
Свойство text-indent задаёт отступ первой строки в блоке текста.
Совет: отрицательные значения допустимы. Отрицательное значение сдвигает первую строку влево.
Пример
Первая строка абзаца имеет отступ 50px.
<style> задай отступ первой строки <p> в 50px. Добавь абзац из нескольких предложений.
Вывод: полная HTML-страница
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
p {
text-indent: 50px;
}
</style>
</head>
<body>
<p>The first line of this paragraph is indented by 50px. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
</body>
</html>
Межбуквенный интервал CSS
Свойство letter-spacing задаёт расстояние между символами в тексте.
Совет: отрицательные значения допустимы.
Пример
У одного заголовка более широкий межбуквенный интервал, а у другого — более узкий.
<style> задай <h1> letter-spacing 5px, а <h2> — letter-spacing -2px. Добавь заголовок каждого уровня.
Вывод: полная HTML-страница
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
h1 {
letter-spacing: 5px;
}
h2 {
letter-spacing: -2px;
}
</style>
</head>
<body>
<h1>Wider letter spacing</h1>
<h2>Tighter letter spacing</h2>
</body>
</html>
Высота строки CSS
Свойство line-height задаёт расстояние между строками.
Примечание: отрицательные значения не допускаются.
Пример
У одного абзаца маленькая высота строки, а у другого — большая.
<style> создай класс абзаца с line-height 0.8 (плотный) и один с line-height 1.8 (свободный). Дай каждому абзацу несколько строк текста, чтобы разница в интервале была видна.
Вывод: полная HTML-страница
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
p.small {
line-height: 0.8;
}
p.big {
line-height: 1.8;
}
</style>
</head>
<body>
<p class="small">This paragraph has a small line height.<br>The lines are close together.<br>Lorem ipsum dolor sit amet.</p>
<p class="big">This paragraph has a big line height.<br>The lines are far apart.<br>Lorem ipsum dolor sit amet.</p>
</body>
</html>
Межсловный интервал CSS
Свойство word-spacing задаёт расстояние между словами в тексте.
Совет: отрицательные значения допустимы.
Пример
У одного абзаца более широкий интервал между словами, а у другого — более узкий.
<style> создай класс абзаца с word-spacing 10px (шире) и один с word-spacing -2px (уже). Добавь абзац текста для каждого.
Вывод: полная HTML-страница
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
p.one {
word-spacing: 10px;
}
p.two {
word-spacing: -2px;
}
</style>
</head>
<body>
<p class="one">This paragraph has wider spacing between words.</p>
<p class="two">This paragraph has tighter spacing between words.</p>
</body>
</html>
Пробельные символы CSS
Свойство white-space задаёт способ обработки пробельных символов внутри элемента. Оно может принимать следующие значения: normal, nowrap, pre, pre-line и pre-wrap.
Пример
При nowrap текст остаётся на одной строке вместо переноса.
<style> задай <p> white-space: nowrap, чтобы текст оставался на одной строке вместо переноса. Добавь длинный абзац текста.
Вывод: полная HTML-страница
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
p {
white-space: nowrap;
}
</style>
</head>
<body>
<p>This text will not wrap to a new line. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
</body>
</html>
Свойства CSS для интервалов текста
Сводка свойств интервалов:
letter-spacing— задаёт расстояние между символами.line-height— задаёт высоту строки.text-indent— задаёт отступ первой строки.white-space— задаёт способ обработки пробельных символов внутри элемента.word-spacing— задаёт расстояние между словами.