HTML самостійно переносить текст на інший рядок, якщо текст не поміщається в один рядок. У деяких випадках, навпаки, потрібно заборонити перенесення слів, наприклад, у пунктах меню або коді програми, щоб не «ламати» верстку. Для цього використовується стильова властивість white-space зі значенням nowrap, вона додається до потрібного елемента з текстом.
У прикладі 1 white-space застосовується до посилань, щоб текст посилання не «розбивався» і не переносився на інший рядок.
Приклад 1. Використання white-space
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Заборона перенесення</title> <style> .menu { padding: 0; /* Забираємо поля за замовчуванням */
background: #34495e; /* Колір тла */
}
.menu li { display: inline-block; /* Пункти меню по горизонталі */
}
.menu a { color: #fff; /* Колір посилань */
padding: 10px; /* Поля навколо тексту */
text-decoration: none; /* Забираємо підкреслення */
display: block; /* Блокове посилання */
white-space: nowrap; /* Забороняємо перенесення тексту */
}
.menu a:hover { background: #2c3e50; /* Колір фону при наведенні */
}
</style>
</head>
<body> <ul class="menu"> <li><a href="#">Електроніка</a></li> <li><a href="#">Комп'ютери</a></li> <li><a href="#">Побутова техніка</a></li> <li><a href="#">Дитячі товари</a></li> <li><a href="#">Зоотовари</a></li> <li><a href="#">Будинок, дача, ремонт</a></li> <li><a href="#">Одяг та взуття</a></li> <li><a href="#">Краса та здоров'я</a></li> <li><a href="#">Спорт та відпочинок</a></li> <li><a href="#">Дозвілля та розваги</a></li>
</ul>
</body>
</html>Результат цього прикладу показаний на рис. 1.
Мал. 1. Меню із забороною перенесення тексту