Атрибут class тега <wbr>
Описание
Атрибут class позволяет назначать один или несколько классов элементу <wbr> для стилизации или взаимодействия через CSS и JavaScript. Тег <wbr> указывает браузеру возможное место разрыва строки.
ДлинноеСловоБезПробелов<wbr class="break-opportunity">Но с возможностью разрыва
Особенности работы с классом для <wbr>:
- Сам тег
<wbr>не создаёт видимого элемента - Классы применяются к потенциальному месту разрыва
- Можно использовать для визуального выделения разрывов в режиме разработчика
- Полезен для логической группировки возможных разрывов
Практическое применение классов:
<style>
.break-point::before {
content: "↓";
color: #999;
font-size: 0.8em;
}
.debug-breaks wbr {
background-color: yellow;
}
</style>
<div class="debug-breaks">
https://<wbr class="break-point">example<wbr class="break-point">.com<wbr class="break-point">/long-path
</div>
Рекомендации:
- Используйте классы для отладки сложных разрывов
- Группируйте схожие точки разрыва с одинаковыми классами
- Добавляйте классы для управления разрывами через JavaScript
- Избегайте избыточного использования - только там, где действительно нужно
Ограничения:
- Классы не влияют на поведение разрыва строки
- Нет визуального отображения без дополнительных CSS-правил
- Браузер сам решает, использовать разрыв или нет
Пример с JavaScript:
<script>
document.querySelectorAll('wbr.debug').forEach(wbr => {
wbr.parentNode.insertBefore(document.createTextNode('·'), wbr);
});
</script>
<p>ДлинноеСловоС<wbr class="debug">Возможными<wbr class="debug">Разрывами</p>
Примечание: Хотя добавление классов к <wbr> редко требуется в production-коде, это может быть полезно при разработке и отладке сложных текстовых блоков с длинными словами или URL.