Запретить перенос слов на сайте: простой способ с помощью CSS

Для того, чтобы запретить перенос слов в CSS, можно использовать свойство white-space с значением nowrap. Например:

p {
  white-space: nowrap;
}

Это задаст стиль для всех абзацев и предотвратит перенос слов внутри них.

Можно использовать это свойство и для других элементов HTML, например, для кнопок:

button {
  white-space: nowrap;
}

Это предотвратит перенос текста внутри кнопок, если текст длинный и не помещается на одну строку.

Также, для того чтобы выровнять текст по левому краю и предотвратить его перенос, можно использовать свойство text-align:

p {
  white-space: nowrap;
  text-align: left;
}

Это задаст стиль для всех абзацев, запретит перенос слов и выровняет текст по левому краю.

Применение этих свойств отображается в браузере следующим образом: