HTML-тег <wbr>

HTML-тег <wbr> (возможность разрыва слов) используется для указания браузеру места, где он может при необходимости разбить строку текста. Этот тег не отображает видимый контент, но помогает улучшить форматирование текста, предлагая потенциальные точки разрыва для длинных текстовых строк или URL-адресов.

Тег <wbr> особенно полезен для предотвращения проблем с переполнением в элементах с ограниченной шириной, обеспечивая при этом чистый и читабельный макет.

Базовый синтаксис тега HTML <wbr>

Тег <wbr> является самозакрывающимся и может быть помещен в длинное слово или строку, где требуется перенос строки: 

<p>ThisIsA<wbr>VeryLongWord</p>

В этом примере браузер при необходимости разобьет текст по тегу <wbr> .

Пример использования тега <wbr>

Вот пример, где тег <wbr> используется для предотвращения переполнения текста: 

<!DOCTYPE html>
<html>
    <head>
        <style>
            .container {
                width: 200px;
                border: 1px solid #ddd;
                word-wrap: break-word;
            }
        </style>
    </head>
    <body>
        <h2>Using <wbr> to Break Long Words</h2>

        <div class="container">
            ThisIsA<wbr>VeryLongWordThatDoesNotFitInTheBox.
        </div>
    </body>
</html>
Пример использования тега wbr

Пояснение: Если текст превышает ширину контейнера, браузер разрывает строку по тегу <wbr> , гарантируя, что текст поместится в контейнер.

Атрибуты тега HTML <wbr>

Тег <wbr> не поддерживает никаких специфических атрибутов. Однако с ним можно использовать глобальные атрибуты, такие как id , class и style .

Оформление длинных слов с помощью CSS и <wbr>

Помимо использования тега <wbr> , CSS может помочь в обработке длинных слов: 

<!DOCTYPE html>
<html>
    <head>
        <style>
            .container {
                width: 200px;
                border: 1px solid #ddd;
                word-wrap: break-word;
            }
            .highlight {
                color: blue;
                font-weight: bold;
            }
        </style>
    </head>
    <body>
        <h2>Styled Long Words</h2>

        <div class="container">
            Please visit <span class="highlight">www.example<wbr>.com</span> for more information.
        </div>
    </body>
</html>
Оформление длинных слов с помощью CSS и wbr

Результат: длинный URL в примере стилизован и будет разрываться на теге <wbr> , если это необходимо для соответствия ширине контейнера.

Практическое применение тега <wbr>

  • Длинные URL-адреса: добавьте точки останова в URL-адреса, чтобы предотвратить переполнение контейнеров.
  • Названия продуктов: Разбивайте длинные названия продуктов на сайтах электронной коммерции, чтобы сохранить целостность макета.
  • Примеры кода: вставляйте точки останова во встроенные фрагменты кода или пути к файлам для лучшей читабельности.
  • Адаптивный дизайн: Улучшите компоновку текста на маленьких экранах, разрешив браузеру переносить строки в соответствующих местах.

Тег <wbr> — это простой, но мощный инструмент для улучшения форматирования текста, обеспечивающий чистые и адаптивные макеты в современном веб-дизайне.