CSS word-break: break-all; (только для длинных слов)?

Question

Исходя из: https://www.w3schools.com/cssref/css3_pr_word-break.asp

Есть ли способ, например, по адресу: https://www.w3schools.com/cssref/tryit.asp?filename=trycss3_word-break

может дать следующее:

Thisissomeveryveryv
erylong word. This
text will break at
any character.

вместо:

Thisissomeveryveryv
erylong word. This te
xt will break at any ch
aracter.

?

Другими словами, разбивайте только отдельные длинные слова, которые шире, чем позволяет контейнер (например, 140px), в противном случае переносите их на другую строку, если они переполняются.

Answer 1

Я думаю, что вы ищете word-break: break-word; или overflow-wrap: break-word;. Вот как MDN Web Docs описывает break-word:

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

Страница также отмечает, что она не поддерживается в Firefox и Internet Explorer.

Ссылка Caniuse для word-break отмечает, что break-word является неофициальным и рассматривается как overflow-wrap: break-word; (overflow-wrap является синонимом word-wrap).

Как это и происходит, overflow-wrap, похоже, имеет довольно хорошую поддержку, поэтому вам, вероятно, будет лучше с этим.