Разница между overflow-wrap и word-break в CSS заключается в том, как они управляют переполнением содержимого. 2

overflow-wrap служит для размещения длинных, неразрывных строк внутри заданного контейнера, позволяя им переноситься при необходимости. 1 Браузер разорвёт слово только в том случае, если он не сможет разместить его в новой строке без переполнения. 2

word-break разрешает перенос слов в любом месте, не обращая внимания на их границы, что может негативно сказаться на читаемости содержимого. 1 Например, значение word-break: break-all позволяет разрывать слова между любыми двумя символами, чтобы уместить их в контейнере. 3

Таким образом, overflow-wrap бережно относится к словам и принимает решение о их переносе только при необходимости, а word-break игнорирует границы слов и разделяет их между любыми символами, даже если размещение в новой строке устранит необходимость в разрыве слова. 12