Атрибут data-* тега <wbr>

Описание

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

Пример использования:
<p> Очень<wbr data-word="длинное">длинное<wbr data-word="слово">слово </p> <script> document.querySelectorAll('wbr[data-word]').forEach(el => { console.log('Разрыв возможен после слова:', el.dataset.word); }); </script>

Синтаксис атрибута:

Шаблон Описание Пример
data-* Любое имя после префикса data- data-info, data-value
data-*-* Многоуровневые имена (с дефисами) data-user-id, data-article-info

Особенности работы:

  • Доступ к значениям в JavaScript через свойство dataset
  • Имена атрибутов преобразуются в camelCase (data-user-id → userId)
  • Могут использоваться в CSS через атрибутные селекторы
  • Поддерживаются всеми современными браузерами

Пример с CSS:

<style> wbr[data-break="important"]::after { content: " (важный разрыв)"; color: red; font-size: 0.8em; } </style> <p> Сложное<wbr data-break="important">сочетание<wbr>слов </p>

Рекомендации:

  • Используйте осмысленные имена data-атрибутов
  • Храните только простые данные (строки, числа)
  • Для сложных данных лучше использовать JSON в одном атрибуте
  • Сочетайте с ARIA-атрибутами для доступности

Ограничения:

  • Не предназначены для хранения больших объемов данных
  • Значения всегда строковые (нужно преобразовывать)
  • Не заменяют собой state management в сложных приложениях

Примечание: Для работы с data-атрибутами в JavaScript используйте:

  • element.dataset - для чтения/записи
  • getAttribute('data-*') - для старых браузеров
  • JSON.parse() - для сложных данных