Как сделать перенос текста в css

Иногда возникает ситуация, когда какой-то текст или слово не помещается в блоке и нужно перенести его на следующую строку.

Чтобы поправить ситуацию можно пойти разными путями. Например с помощью специального символа ­ вручную установить перенос там где требуется.

д____л____и__­__н____н____о____е

Или например с помощью CSS свойства word-break - управляет переносом длинных слов (normal - не переносить, если перенос не задан явно, break-all - принудительно переносить, keep-all - не переносить, даже если слово содержит дефис).

Например:

div class="long-text">
  Напишем тут очень д____л____и____н____н____о____е слово
 которое по идее должно перенестись на след строку.
</div>

Добавим стили:

.long-text {
  border: 1px solid #245488;
  padding: 10px;
  width: 170px;
  word-break: break-all;
}

Результат: