​В HTML, если у вас есть длинное слово, которое не помещается в...

​В HTML, если у вас есть длинное слово, которое не помещается в контейнер, оно переполнит контейнер и нарушит верстку. Чтобы избежать этого, в HTML есть два способа безопасной разбивки длинных слов.

Использование тега <wbr>

Тег <wbr> означает "возможность разрыва слова" (word break opportunity) и представляет собой несемантический тег, который указывает браузеру разбить и перенести слово в указанной точке. Если у вас есть длинное слово, например supercalifragilisticexpialidocious, и вы хотите оборвать его на определенном символе в зависимости от вьюпорта с целью переноса на следующую строку, вы можете сделать это с помощью тега <wbr> следующим образом.

<p>super<wbr>califragilistic<wbr>expialidocious</p>

Проверить это в работе можно тут: https://codepen.io/amit_merchant/pen/BaPmwZR

Обратите внимание, что слово будет оборвано только там, где это необходимо, а не в каждом месте, где используется <wbr>.

Использование элемента &shy;

Элемент &shy; - это неразрывный дефис, который указывает браузеру разбить и перенести слово в указанной точке. Если у вас есть длинное слово типа supercalifragilisticexpialidocious и вы хотите оборвать его на определенном символе с дефисом с целью переноса на следующую строку, вы можете сделать это с помощью сущности &shy; следующим образом.

<p>super&shy;califragilistic&shy;expialidocious</p>

Это позволит разумно разбить слово на символы r и c, где оно может переполнить контейнер. Таким образом, браузер разобьет слово дефисом (-) и отобразит его как показано в скрине.

Слово, как и в первом варианте, будет оборвано только там, где это необходимо.

Откуда я все это знаю?

https://www.amitmerchant.com/two-ways-to-safely-break-a-long-word-in-html/

@MikeBlazerX

Источник новости https://t.me/mikeblazerx/1150...