Перенос длинной строки без пробелов в HTML и XUL: CSS

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

Для осуществления переноса длинной строки на новую строку примените CSS-свойство overflow-wrap: break-word;:

.wrap-it {
  overflow-wrap: break-word; /* Надежный способ для длинных слов */
}

Приступая к элементу, в котором необходимо поставить перенос, задайте класс wrap-it:

<div class="wrap-it">оченьдлиннаястрока без пробелов....</div>

С применением данного метода длинный текст будет адекватно разбит и размещен в границах контейнера.

Исследование текстового переноса

Отсутствие пробелов — нисколько не страшно! Используйте overflow-wrap: break-word; для обработки таких ситуаций. Чтобы регулировать место переноса в блочных элементах, таких как <div> или <p>, установите фиксированную width или максимальную ширину max-width:

.wrap-it {
  overflow-wrap: break-word;
  width: 200px; /* Не нужно тексту занимать весь экран! */
}

Нулевой пробел: секретные знаки переноса

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

<div class="wrap-it">
  ATCG&#8203;GGTA&#8203;CCAT&#8203;... /* Код под пристальным взглядом */
</div>

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

Свойство white-space: регулятор переноса через пробел

Для точного контроля над использованием пробелов в тексте подойдут свойства white-space. Например, white-space: pre-wrap; сохранит формат исходного текста, что важно для кода или стихов. pre-line или break-all обеспечат различные варианты переноса.

Overflow: скрыть или прокрутить?

Бывают случаи, когда одних переносов мало. Комбинация overflow: auto; и ограничивающей ширины предотвратит выход контента за пределы контейнера, в то время как ваша верстка сохранится в первоначальном виде. Если необходимо, появятся скролл-бары:

.neat-and-clean {
  overflow: auto;
  width: 100%; /* Определяем границы для текста */
}

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

Представим строку как длинный товарный поезд (🚂), который должен проехать через туннель (ваш контейнер):

Поезд: 🚂[AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA]

Но туннель способен вместить только большее число вагонов:

Туннель: 🚇[AAAAA]

В этой ситуации word-wrap: break-word; будет выступать в роли стоп-сигнала:

.wrap-it {
  word-wrap: break-word; /* CSS версия фразы Гэндальфа "Поезд, остановись!" */
}

И вот, поезд проходит туннель по частям:

Туннель: 🚇[AAAAA]
        🚇[AAAAA]
        🚇[AAAAA]
        ...

Таким образом, длинная строка без пробелов переносится как вагоны товарного поезда.

Работа в различных браузерах

overflow-wrap: break-word; функционирует отлично, но поведение может немного отличаться в разных браузерах. Создавайте тесты, чтобы удостовериться в строгом соответствии вывода в различных браузерах. То, что работает в Chrome, может отображаться иначе в Safari.

CSS-стили: внешние против встроенных

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

.break-style {
  word-wrap: break-word; /* "Сложные слова? Я с этим справлюсь!" */
}

Мягкие переносы: утонченный способ переноса строк

Для исключительно аккуратного переноса текста пригодятся HTML мягкие переносы (­). Но будьте внимательны – их поддержка варьируется от браузера к браузеру:

<div class="wrap-it">
  An&shy;ex&shy;am&shy;ple&shy;stringwithsoft&shy;hyphens... /* Мягкий перенос в прогрессе */
</div>

Не пренебрегайте тестированием в разных браузерах. Firefox и Safari могут воспринимать их не так, как было запланировано.

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

1. word-break – CSS: Каскадные таблицы стилей | MDN — Обстоятельное изучение использования word-break.
2. Свойство CSS overflow-wrap – W3Schools — Все необходимое про overflow-wrap.
3. Can I use... Support tables for HTML5, CSS3, etc. — Информация о совместимости и поддержке браузеров для word-break.
4. Работаем с длинными словами в CSS – justmarkup — Разберитесь в методах работы с длинными словами используя CSS.
5. overflow-wrap | CSS-Tricks — Знакомство с overflow-wrap и его возможностями.
6. Свойство CSS word-wrap – W3Schools — Руководство по использованию word-wrap для улучшения восприятия текста.