Выравнивание, оформление и интервалы текста
Выравнивайте текст, добавляйте подчёркивание или зачёркивание и управляйте интервалами между буквами и строками.
«Выравнивание, оформление и интервалы текста» — бесплатный урок CSS Academy на CoddyKit. Это урок 3 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения CSS Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс CSS Academy содержит 4 уроков всего.
text-align
text-align управляет горизонтальным выравниванием строчного содержимого внутри блочного контейнера.
<p class="left">Left aligned text</p>
<p class="center">Center aligned text</p>
<p class="right">Right aligned text</p>
<p class="justify">Justified text that stretches to fill the full width of its container on every line except the last, spreading word spacing evenly across the line.</p>
text-align: justify
justify растягивает строки до полной ширины контейнера, добавляя интервалы между словами. Используйте это значение вместе с hyphens: auto, чтобы избежать неестественно больших пробелов в узких контейнерах.
<p>Justified paragraph text with hyphenation enabled so that long words like internationalization can break across justified lines cleanly without leaving large gaps.</p>
text-decoration
text-decoration добавляет линии к тексту. Обычно его используют для подчёркивания ссылок или зачёркивания удалённого содержимого.
<a href="#">Underlined link</a>
<p class="strikethrough">Strikethrough text</p>
<a href="#" class="no-underline">No underline link</a>
Полная запись text-decoration
text-decoration — это сокращённая запись для линии, стиля, цвета и толщины:
<a href="#">Wavy red underline link</a>
text-transform
text-transform изменяет регистр текста, не меняя исходный HTML:
<p class="upper">uppercase this text</p>
<p class="lower">LOWERCASE THIS TEXT</p>
<p class="title">title case this text</p>
<p class="none">No Transform Applied</p>
text-indent
text-indent задаёт отступ первой строки блочного элемента. Используйте отрицательное значение вместе с соответствующим внутренним отступом, чтобы доступным для вспомогательных технологий способом скрыть текст (замена изображения).
<p class="indent">This paragraph's first line is indented by 2em, a classic print-style paragraph convention brought to the web.</p>
<a href="#" class="logo-link">Company Logo</a>
white-space
white-space управляет обработкой пробелов и переносов строк в исходном HTML:
normal— объединять пробелы, переносить текст по словамnowrap— запрещать перенос строкpre— сохранять пробелы, не переносить строкиpre-wrap— сохранять пробелы и разрешать перенос строк
<p class="nowrap">This text will not wrap no matter how long the line becomes.</p>
<pre>function example() {
return true;
}</pre>
letter-spacing
letter-spacing задаёт дополнительный интервал между символами. Положительные значения раздвигают глифы, отрицательные — сближают их. Используйте em для пропорционального масштабирования.
<p class="spaced">spaced heading text</p>
word-spacing
word-spacing добавляет дополнительный интервал между словами. Обычно он не требуется, но полезен для тонкой настройки выровненного по ширине текста или крупных заголовков.
<h1>Word Spaced Heading Example</h1>
text-overflow: ellipsis
Обрезайте выходящий за границы текст, добавляя многоточие. Для этого требуются overflow: hidden и white-space: nowrap.
<p class="truncate">This is a very long line of text that will be truncated with an ellipsis</p>
Вертикальный текст с writing-mode
writing-mode изменяет направление потока текста. В сочетании с text-orientation это позволяет создавать вертикальную типографику CJK или творчески повёрнутые подписи.
<div class="label">Vertical Label Text</div>
Быстрая проверка
Какие три свойства требуются, чтобы отображать многоточие при выходе текста за границы?
Итоги
text-align позиционирует строчное содержимое в контейнере. text-decoration добавляет или убирает линии. text-transform изменяет регистр. Сочетание white-space: nowrap + overflow: hidden + text-overflow: ellipsis — классический способ обрезки текста.
Изучай CSS с ИИ-репетитором — бесплатно
Пиши и запускай код прямо в браузере, получай мгновенную помощь от ИИ-репетитора 24/7 и продолжи учиться на сайте или в приложении.
- Курсы
- 40
- Уроки
- 159
Часто задаваемые вопросы
Урок «Выравнивание, оформление и интервалы текста» бесплатный?
Да — полный текст урока «Выравнивание, оформление и интервалы текста» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс CSS Academy, подпишись на CoddyKit PRO. Курс CSS Academy содержит 4 уроков всего.
Чему я научусь в уроке «Выравнивание, оформление и интервалы текста»?
Выравнивайте текст, добавляйте подчёркивание или зачёркивание и управляйте интервалами между буквами и строками. Ты практикуешь CSS Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.
Нужен ли мне опыт, чтобы начать CSS Academy?
Предыдущий опыт не требуется. CSS Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 3 из 4.
Сколько времени занимает урок «Выравнивание, оформление и интервалы текста»?
Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.
Можно ли писать и запускать код в этом уроке CSS Academy?
Да. Каждый урок CSS Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.
Все уроки этого курса
- Семейство шрифтов и безопасные для веба шрифты
- Размер, насыщенность и стиль шрифта
- Выравнивание, оформление и интервалы текста
- Google Fonts и @font-face