Пробельный символ для переноса строки без hyphen в CSS

Быстрый ответ

Противоположностью неразрывного пробела ( ) в HTML можно считать пробел нулевой ширины (​). Он позволяет осуществлять перенос текста без формирования заметного отступа. Для управления переносами строк и при этом сохранении возможности схлопывания обычных пробелов используется CSS-свойство white-space: pre-line.

<!-- Факт: В космосе никто не услышит ваш висячий пробел -->
<!-- Пример с пробелом нулевой ширины -->
Вот&#8203;пример.

<!-- CSS для сохранения пробелов и контроля переноса строк -->
<style>.pre-line { white-space: pre-line; }</style>
<div class="pre-line">Вот    пример
с переносом.</div>

Бесшовная адаптация текста в HTML

Для создания адаптивного контента важную роль играет тег <wbr>, обозначающий возможные места переноса слов. Этот тег работает аналогично пробелу нулевой ширины, пометив предпочтительные точки для разделения текста.

Стили CSS3, в частности свойство word-wrap, позволяют регулировать переносы слов точно, избегая переполнения текстовым контентом:

/* Перенос длинных слов для предотвращения переполнения */
.block { word-wrap: break-word; }

Такой подход помогают разработчику адаптировать веб-контент под различные размеры экранов, обеспечивая пользователям удобство чтения.

Визуализация

Представьте, что   (неразрывный пробел) — это невидимая скрепка, которая держит слова вместе в HTML и не позволяет их разделить на строки:

Без  :    | "Stack" "Overflow" |
С  :      | "StackOverflow"    |

Его противоположностью выступает символ мягкого переноса (­), который указывает на места, где текст может быть разделен:

Без ‘противоположного’: | "Antidisestablishmentarianism"      |
С ‘противоположным’   : | "Anti­dis­establishmentarianism" |

Обратите внимание: мягкий перенос не обязывает текст переходить на новую строку, он просто маркирует возможные точки для разделения:

На узком экране: | "Анти-"         |
                 | "дис-"          |
                 | "эстаблишмент-" |
                 | "арианизм"      |

Это всё равно что аккуратно разрезать текст по направляющим линиям, там где это действительно необходимо.

Создано для глаз: макет сайта и читабельность

Управление макетами

Контролируйте макеты сайта, используя CSS-свойства, например, word-wrap, чтобы избежать переполнения и сохранить визуальную целостность дизайна. Современные браузеры, поддерживающие эти свойства, позволяют достичь идеальной совместимости между различными устройствами.

Подробнее об этом расскажет наш спикер на видео

Правила переноса (в духе Unicode!)

Освойте алгоритмы переноса Юникода, изучите правила LB7 и LB8, чтобы понимать, где допустимы и где недопустимы переносы. Это позволит вам правильно применять ​ или <wbr> для создания оптимальной системы переносов.

Визуальная гладкость без прерываний

Стремитесь к непрерывному восприятию текста. Использование ­ может нежелательно добавить дефис, нарушая естественный поток чтения. Замените его пробелом нулевой ширины, тегом <wbr> и CSS-подходами для невидимых переносов, сохраняя естественный ритм чтения.

Полезные материалы

1. HTML сущности на W3Schools — подробная информация о HTML сущностях, включая  .
2. Борьба с пробелами между элементами inline-block на CSS-Tricks — протестированные временем методы решения проблемы пробелов в HTML/CSS.
3. Пробел нулевой ширины на Википедии — глубокое погружение в пробел нулевой ширины в Юникоде.
4. CSS в действии: невидимый контент для скрин-ридеров на WebAIM — создание доступного контента с помощью инвизуальных заполнителей в качестве альтернативы белым пространствам.
5. Схлопывание отступов на SitePoint — подробное описание процесса схлопывания белого пространства в HTML и CSS.
6. Уровень 3 модуля текста CSS на W3.org — официальное описание обработки свойства white-space в спецификации CSS.
7. Как убрать пространство между элементами inline/inline-block? на Stack Overflow — коллективно проверенные методы устранения пространства между элементами inline-block.