В HTML, если у вас есть длинное слово, которое не помещается в контейнер, оно переполнит контейнер и нарушит верстку. Чтобы избежать этого, в HTML есть два способа безопасной разбивки длинных слов.
Использование тега
<wbr>
Тег
<wbr> означает "возможность разрыва слова" (word break opportunity) и представляет собой несемантический тег, который указывает браузеру разбить и перенести слово в указанной точке. Если у вас есть длинное слово, например supercalifragilisticexpialidocious, и вы хотите оборвать его на определенном символе в зависимости от вьюпорта с целью переноса на следующую строку, вы можете сделать это с помощью тега
<wbr> следующим образом.
<p>super<wbr>califragilistic<wbr>expialidocious</p>
Проверить это в работе можно тут:
https://codepen.io/amit_merchant/pen/BaPmwZR
Обратите внимание, что слово будет оборвано только там, где это необходимо, а не в каждом месте, где используется <wbr>.
Использование элемента ­
Элемент ­ - это неразрывный дефис, который указывает браузеру разбить и перенести слово в указанной точке. Если у вас есть длинное слово типа supercalifragilisticexpialidocious и вы хотите оборвать его на определенном символе с дефисом с целью переноса на следующую строку, вы можете сделать это с помощью сущности ­ следующим образом.
<p>super­califragilistic­expialidocious</p>
Это позволит разумно разбить слово на символы r и c, где оно может переполнить контейнер. Таким образом, браузер разобьет слово дефисом (-) и отобразит его как показано в скрине.
Слово, как и в первом варианте, будет оборвано только там, где это необходимо.