Как корректно переносить текст по словам внутри тега в поле HTML документа 1С?

← На главную

При работе с полем HTML документа в 1С часто нужно выводить предварительно отформатированный текст: код, логи, сообщения ошибок или другие данные, где важно сохранить пробелы и переносы строк. Для этого обычно используют тег <pre>.

Но у тега <pre> есть особенность: по умолчанию он сохраняет форматирование текста, но не переносит длинные строки автоматически. Из-за этого строка может выходить за границы поля HTML документа или появится горизонтальная прокрутка.

Проблема

Часто пытаются решить проблему через свойство word-wrap:

<code><pre style="font-size: 10pt; font-family: Courier New; color: #000000; word-wrap: normal;">
Типы ДанныеФормыДерево и ДанныеФормыКоллекция перед сериализацией преобразуются в ДеревоЗначений и ТаблицаЗначений.
Типы ДанныеФормыДерево и ДанныеФормыКоллекция перед сериализацией преобразуются в ДеревоЗначений и ТаблицаЗначений.
Типы ДанныеФормыДерево и ДанныеФормыКоллекция перед сериализацией преобразуются в ДеревоЗначений и ТаблицаЗначений.
</pre></code>

При word-wrap: normal; длинные строки не переносятся. Если поставить word-wrap: break-word;, то слишком длинные фрагменты могут начать переноситься с разрывом внутри слова. В результате текст может выглядеть некрасиво и плохо читаться.

Причина

Основное поведение тега <pre> задается не свойством word-wrap, а свойством white-space.

По умолчанию для <pre> используется поведение, близкое к white-space: pre;. Это означает:

пробелы сохраняются;
переносы строк сохраняются;
автоматический перенос длинных строк по ширине контейнера не выполняется.

Поэтому длинная строка внутри <pre> будет тянуться вправо до явного переноса строки.

Правильное решение

Чтобы текст внутри <pre> переносился по словам, но при этом сохранял исходные пробелы и переносы строк, нужно использовать свойство white-space: pre-wrap;.

Рекомендуемый стиль:

<code>white-space: pre-wrap;
overflow-wrap: break-word;
word-wrap: break-word;
word-break: normal;</code>

Главное свойство здесь — white-space: pre-wrap;. Оно сохраняет форматирование текста, но разрешает автоматический перенос строк по ширине контейнера.

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

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

Пример

<code><pre style="font-size: 10pt;
            font-family: 'Courier New', monospace;
            color: #000000;
            white-space: pre-wrap;
            overflow-wrap: break-word;
            word-wrap: break-word;
            word-break: normal;">
Типы ДанныеФормыДерево и ДанныеФормыКоллекция перед сериализацией преобразуются в ДеревоЗначений и ТаблицаЗначений.
ОченьДлинноеНеразрывноеСловоКотороеДолжноПереноситьсяТолькоЕслиОноНеПомещаетсяВШиринуHTMLПоля.
Типы ДанныеФормыДерево и ДанныеФормыКоллекция перед сериализацией преобразуются в ДеревоЗначений и ТаблицаЗначений.
</pre></code>

Готовый вариант для поля HTML документа

<code><style>
    pre {
        font-family: "Courier New", monospace;
        font-size: 10pt;
        color: #000000;
        margin: 0;
        padding: 8px;
        border: 1px solid #cccccc;
        background: #f7f7f7;

        white-space: pre-wrap;
        overflow-wrap: break-word;
        word-wrap: break-word;
        word-break: normal;

        max-width: 100%;
        box-sizing: border-box;
    }
</style>

<pre>Типы ДанныеФормыДерево и ДанныеФормыКоллекция перед сериализацией преобразуются в ДеревоЗначений и ТаблицаЗначений.
ОченьДлинноеНеразрывноеСловоКотороеДолжноПереноситьсяТолькоЕслиОноНеПомещаетсяВШиринуHTMLПоля.
Типы ДанныеФормыДерево и ДанныеФормыКоллекция перед сериализацией преобразуются в ДеревоЗначений и ТаблицаЗначений.</pre></code>

Если текст подставляется из 1С

Если содержимое для <pre> формируется из строки в 1С, текст нужно экранировать перед вставкой в HTML. Иначе символы <, > и & могут сломать разметку.

Минимально нужно заменить:

<code>&  на  &amp;
<  на  &lt;
>  на  &gt;</code>

После этого текст будет отображаться как обычный текст, а не восприниматься как HTML-код.

Итог

Для корректного переноса текста по словам внутри тега <pre> в поле HTML документа 1С нужно использовать white-space: pre-wrap;. Это свойство сохраняет пробелы и переносы строк, но разрешает автоматический перенос длинных строк по ширине контейнера.

Оптимальный набор свойств:

<code>white-space: pre-wrap;
overflow-wrap: break-word;
word-wrap: break-word;
word-break: normal;</code>

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