Как в CKEditor запретить переносы строк на дефисах

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

Чтобы предотвратить перенос слов, содержащих дефисы, используйте свойство CSS white-space: nowrap;, благодаря которому текст будет отображаться в одной строке:

/* Обеспечиваем целостность текста */
.no-break { white-space: nowrap; }

Данному HTML-элементу нужно присвоить указанный класс:

<!-- Прочность как у непрерывного колеса поезда -->
<span class="no-break">non-breaking-hyphenated-word</span>

Для автоматической замены привычных дефисов на неразрывные удобно использовать JavaScript или jQuery.

Обход системы при помощи Юникода

Трюк с неразрывными дефисами

Используйте неразрывный аналог дефиса из Юникода – НЕРАЗРЫВНЫЙ ДЕФИС (U+2011). Для этого замените обычные дефисы на коды ‑ или ‑, и слова с тире станут неделимой частью текста в любом браузере.

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

Непрерывность в CSS

Установив white-space: nowrap;, вы гарантируете целостность текста. Важно проверить совместимость этого свойства, особенно при работе с такими браузерами как IE или Edge.

Волшебство JavaScript и jQuery

С помощью JavaScript или jQuery вы сможете легко обрабатывать большие объемы текста, автоматически заменяя привычные дефисы на неразрывные:

/* Заменяем обычные дефисы на неразрывные */
document.body.innerHTML = document.body.innerHTML.replace(/-/g, '‑');

Осложнения с CKEditor & CMS

Если вы используете CKEditor или другие системы управления контентом (CMS), следите за тем, чтобы неразрывные дефисы не преобразовывались обратно в обычные при сохранении и редактировании. Изучите настройки этих инструментов и рабочие алгоритмы исключений при осуществлении обработки контента.

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

Рассмотрим процесс на практике:

Обычный текст:             🚂-Поезд-🚂, мчится, не останавливаясь!
Возможный перенос строки:  О нет, это выглядит неуклюже. 🚂-|
                                                  Поезд-🚂

Текст с CSS неразрывностью: 🚂 Поезд-Без-Остановок 🚂. Уверенно двигаемся вперед!

Текст, защищенный CSS:      И вот, несмотря на все, поезд продолжает свой путь... 🚂 поезд-без-переносов 🚂
Бесперебойное движение:     Без сбоев и остановок в мире браузеров! 🚂поезд-без-переносов🚂 |

Кодирование исключений

Символ соединения слов

Использование символа соединения слов (⁠) станет Вашим верным помощником в сложных ситуациях с дефисами в редактируемом тексте.

<!-- Надежное склеивание слов -->
<span>word&#8288;-&#8288;word</span>

Тег <nobr>

Тег <nobr>, хоть и не является стандартным в HTML, порой может помочь сохранить неразрывность текста с дефисами, выступая в качестве защитной оболочки.

<!-- Идеальная целостность без прерываний -->
<nobr>hyphenated-word</nobr>

Обходные пути для IE

Пользователям Internet Explorer следует уделить дополнительное внимание проверке кода, особенно если речь идет о работе со старыми версиями данного браузера.

Безупречная работа с CMS

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

Тестирование на эксцентричность браузеров

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

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

1. text-overflow – CSS: Cascading Style Sheets | MDN – подробное руководство по работе с переполнением текста в CSS.
2. Свойство CSS white-space – детальное изучение свойства CSS white-space для управления переносами текста.
3. word-break | CSS-Tricks – подробный материал о том, как контролировать переносы слов в тексте.
4. css selectors – How to write a CSS hack for IE 11? – Stack Overflow – полезная дискуссия о использовании Unicode-символов для предотвращения переносов текста.
5. word-break – CSS: Cascading Style Sheets | MDN – официальное руководство по CSS свойству word-break от MDN, содержащее информацию о контроле переносов слов в тексте.