How to indicate where a word should wrap in HTML/CSS

By using word-wrap, word-break and overflow-wrap in CSS you can control the browser’s behaviour when it comes to word wrapping. However, it is not possible to control where the word breaks. It just breaks when the word no longer fits in the container.

To indicate where a word can be broken, the soft hyphen can be used. The soft hyphen is a html code:

­

For example:

Thisisaverylongword

and we want it to break just after “very”, then we type:

Thisisavery­longword

When the container doesn’t fit the word, it will be displayed on two lines:

Thisisavery-
longword