Всем привет и приступим. Допустим у нас есть следующий текст:

<p>
        Правительство Объединенных Арабских Эмиратов и администрация концентрируют в этом
        городе все самые новые технологии, основанные на последних достижениях науки и техники,
        пытаясь превратить его город будущего, словно сошедший с экрана какого-нибудь
        научно-фантастического фильма. К этим технологиям можно отнести роботов-полицейских,
        автомобили-роботы и транспортную систему Hyperloop, а в недалеком будущем в Дубайе
        начнет функционировать служба автоматических летающих такси. И в рамках подготовки к
        этому событию электрический двухместный летательный аппарат Volocopter с 18 роторами,
        который и будет использоваться в качестве такси, совершил первый полет в автоматическом
        режиме, пишут...
    </p>

здесь у нас указан некий текст с которым мы сейчас начнем работать.

И первое свойство которое мы с вами рассмотрим называется word-break

word-break: normal | keep-all | break-all

Нас в основном интересуют два значения данного свойства normal - дефолтное значение и break-all с помощью которого мы устанавливаем что перенос слов осуществляется посимвольно. Что касается keep-all, то данное значение служит для переноса слов на китайском, японском и корейском языках.

p{
    word-break: break-all;.
}

заметьте, что после применения данного стиля весь наш текст растягивается в полную доступную ширину и переносы осуществляются не по словам, а по символам. Это свойство может быть полезно когда у нас есть очень длинное слово которое не влезает в заданную ширину. Однако это создает своего рода неудобства, так как посимвольно переносятся абсолютно все слова даже те которые влезают в заданную ширину.

К счастью есть аналогичное свойство которое переносит только не влезающие слова по символам. Называется оно overflow-wrap:

p{
overflow-wrap: break-word;
}

и после применения значения break-word, весь наш текст переносится по словам, а слова которые не влезают в заданную ширину переносятся посимвольно. Можно сказать задача выполнена! Помимо значения break-word данное свойство принимает:

overflow-wrap: normal | break-word | inherit;

Теперь давайте перейдем к более продвинутому свойству css для переноса слов в тексте.

Рассмотрим свойство white-space c помощью которого мы можем имитировать работу тега pre не меняя сам текст на моноширный.

white-space: normal | nowrap | pre | pre-line | pre-wrap | inherit

По сути с помощью данного свойства мы работает только с пробелами в тексте. К примеру если мы применим следующий стиль к нашему тексту:

white-space: nowrap;

все переносы строк у нас будут проигнорированы и наш текст отобразиться в виде одной строки.

white-space: pre;

В случае значения pre все переносы строк будут аналогичны переносам в исходном коде. Причем если текст не будет помещаться в заданную ширину, то он переносится не будет. Если мы хотим чтобы он переносился, то нам нужно указать значение pre-line.

Если же мы хотим чтобы у нас учитывались не только переносы строк исходного кода, но и пробелы между словами, тогда нужно указать:

white-space: pre-wrap;

Вот в принципе и все что я хотел вам рассказать про переносы слов средствами css. Надеюсь данная статья была для вас полезна и вы не раз еще воспользуетесь полученными знаниями.

Ну а я же с вами прощаюсь. Желаю успехов и удачи! Пока!