Каталог
Веб-разработка с нуля: четыре курса по порядку.
HTML, затем CSS, JavaScript и SQL. Каждый курс говорит, что нужно знать до него и что вы будете уметь после.
Загружаем курсы…
Каталог
HTML, затем CSS, JavaScript и SQL. Каждый курс говорит, что нужно знать до него и что вы будете уметь после.
Загружаем курсы…
Урок 10 из 53 · 14 мин
Выравнивание, подчёркивания, регистр, интервалы, тени, переносы и обрезка длинного текста.
Заголовок по центру, подзаголовок капсом с разрядкой, а длинные названия в карточке — с троеточием.
Всё это свойства текста. Ни одной картинки не понадобится.
text-alignleft, center, right, justify или логические start/end.<style>
h1 { text-align: center; }
</style>
<h1>Мой сайт</h1>text-decorationunderline, line-through, none, с цветом и толщиной: underline 2px #c8763a.<style>
a { text-decoration: underline 2px #c8763a; text-underline-offset: 4px; }
</style>
<a href="#">Фирменная ссылка</a>text-transformuppercase, lowercase, capitalize.<style>
.kicker { text-transform: uppercase; }
</style>
<p class="kicker">Новинка осени</p>letter-spacing0.1em.<style>
.kicker { text-transform: uppercase; letter-spacing: 0.12em; }
</style>
<p class="kicker">Новинка осени</p>word-spacing<style>
p { word-spacing: 0.6em; }
</style>
<p>Ручки тетради аксессуары</p>text-indent<style>
p { text-indent: 2em; max-width: 30ch; }
</style>
<p>Пишем о путешествиях, фотографиях и маленьких открытиях каждый день.</p>text-shadowсмещение-x смещение-y размытие цвет.<style>
h1 { color: white; background: #c8763a; text-shadow: 0 2px 6px rgb(0 0 0 / 50%); }
</style>
<h1>Поверх фото</h1>white-spacenowrap — не переносить, pre — как в коде, pre-line — переносы из текста.<style>
.price { white-space: nowrap; }
</style>
<p style="width:80px">Пенал <span class="price">290 ₽</span></p>overflow-wrapanywhere или break-word — переносить слово, которое не влезает.<style>
p { width: 120px; overflow-wrap: anywhere; background: #fdf6ec; }
</style>
<p>kofeinya-site-kazan.ru</p>word-breakbreak-all рвёт слова в любом месте, keep-all — не рвёт.<style>
p { width: 120px; word-break: break-all; }
</style>
<p>SALE2026PROMOCODE</p>hyphenshyphens: auto с lang на странице — переносы с дефисом.<style>
p { hyphens: auto; width: 120px; }
</style>
<p lang="ru">Ультрасовременная электростанция</p>text-overflowellipsis вместе с overflow: hidden и white-space: nowrap.<style>
.title { width: 140px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
</style>
<p class="title">Пенал с лавандой и мёдом по-казански</p>text-wrapbalance — ровные строки в заголовке, pretty — без одинокого слова в конце абзаца.<style>
h2 { text-wrap: balance; width: 220px; }
</style>
<h2>Самый вкусный пенал в центре Казани</h2>vertical-alignmiddle, top, baseline для строчных элементов и ячеек таблиц.<style>
img { vertical-align: middle; }
</style>
<p><img src="https://picsum.photos/id/30/24/24" alt="" width="24" height="24"> Наше материал</p>Капс — только через text-transform и с разрядкой. Троеточие требует трёх свойств сразу.
У .title длинное название вылезает. Обрежь его троеточием: white-space: nowrap, overflow: hidden, text-overflow: ellipsis. А подпись .kicker сделай капсом (uppercase).
Выберите все подходящие варианты.
Какие свойства нужны для обрезки строки с троеточием?
Выберите один ответ.
Как сделать текст заглавными буквами, не переписывая его?
Проверяем состояние обучения…