Безопасное использование ключевых слов в Django-summernote предотвращает разворачивание слов даже при явном разворачивании слов

Я пытаюсь использовать summernote с django и столкнулся с проблемой, когда если я вставляю 200 слов инлайн-текста lorem ipsum в качестве теста в текстовое поле, он правильно отображает текст, но в виде одной строки, которая слишком большая и уходит за пределы экрана вправо.

Если я просто вставляю lorem ipsum, как жестко закодировано в шаблоне, то word wrap работает отлично.

Я использую tailwind здесь:

<div class="prose max-w-full break-words">
    {{ post.content | safe }}
</div>

Поле содержимого является текстовым полем:

content = models.TextField()

Я попробовал добавить ключевое слово linebreaks и установить word-wrap на разрыв слова, но это ничего не дало:

<div class="prose max-w-full break-words" style="word-wrap: break-word;">
    {{ post.content | safe }}
</div>

Правильное оформление длинных слов

CSS - `overflow-wrap: break-word;`

word-wrap и overflow-wrap означают одно и то же.

Примечание: Изначально это свойство было нестандартным расширением Microsoft с именем word-wrap, не имеющим префиксов, и было реализовано в большинстве браузеров с таким же именем. С тех пор он был переименован в overflow-wrap, а псевдонимом стал word-wrap.

CSS: overflow-wrap - MDN-документы

div {
  width: 150px;
  border: 2px solid #000;
}

.example {
  overflow-wrap: break-word;
}

<div class="example">
  Most words are short & don't need to break. But <strong>Antidisestablishmentarianism</strong> is long. The width is set to min-content, with a max-width of 11em.
</div>
<div>
  Most words are short & don't need to break. But <strong>Antidisestablishmentarianism</strong> is long. The width is set to min-content, with a max-width of 11em.
</div>

деленья деленья

Попутный ветер CSS v3 - `break-words`

В TailwindCSS версии 3 утилита break-words включает в себя параметр overflow-wrap: break-word;.

Типографика: Разбивка на слова - Tailwind CSS v3

Таким образом, нет никакой разницы между написанием решения непосредственно в атрибуте стиля CSS и использованием утилиты break-words.

<script src="https://cdn.tailwindcss.com"></script>

<div class="flex gap-2">
  <div class="break-words w-32 border-2">
    Most words are short & don't need to break. But <strong>Antidisestablishmentarianism</strong> is long. The width is set to min-content, with a max-width of 11em.
  </div>
  <div class="w-32 border-2">
    Most words are short & don't need to break. But <strong>Antidisestablishmentarianism</strong> is long. The width is set to min-content, with a max-width of 11em.
  </div>
</div>

деленья деленья

Попутный ветер CSS v4 - `wrap-break-word`

За исключением случаев, когда вы используете версию 4. Вплоть до версии 3 некоторые свойства overflow-wrap были нелогично объединены с word-break, но в версии 4 они были разделены; таким образом, эквивалент break-words из более ранних версий теперь равен wrap-break-word.

Типографика: overflow-wrap - Документы TailwindCSS v4
Типографика: разбивка по текстам - TailwindCSS v4 Docs

<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>

<div class="flex gap-2">
  <div class="wrap-break-word w-32 border-2">
    Most words are short & don't need to break. But <strong>Antidisestablishmentarianism</strong> is long. The width is set to min-content, with a max-width of 11em.
  </div>
  <div class="w-32 border-2">
    Most words are short & don't need to break. But <strong>Antidisestablishmentarianism</strong> is long. The width is set to min-content, with a max-width of 11em.
  </div>
</div>

деленья деленья

<время работы/>

Правильное оформление текста

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

CSS - `white-space: normal;`

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

CSS: white-space - MDN-документы

div {
  width: 150px;
  border: 2px solid #000;
  white-space: preserve nowrap; /* you overrode it earlier */
}

.example {
  overflow-wrap: break-word;
  white-space: normal; /* but you can specifically revert it */
}

<div class="example">
  Most words are short & don't need to break. But <strong>Antidisestablishmentarianism</strong> is long. The width is set to min-content, with a max-width of 11em.
</div>
<div>
  Most words are short & don't need to break. But <strong>Antidisestablishmentarianism</strong> is long. The width is set to min-content, with a max-width of 11em.
</div>

деленья деленья

Попутный ветер CSS v3, v4 - `whitespace-normal`

Типографика: пробелы - TailwindCSS v4 Docs

@layer base {
  div {
    white-space: preserve nowrap; /* you overrode it earlier */
  }
}

<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>

<div class="flex gap-2">
  <div class="whitespace-normal wrap-break-word w-32 border-2">
    Most words are short & don't need to break. But <strong>Antidisestablishmentarianism</strong> is long. The width is set to min-content, with a max-width of 11em.
  </div>
  <div class="w-32 border-2">
    Most words are short & don't need to break. But <strong>Antidisestablishmentarianism</strong> is long. The width is set to min-content, with a max-width of 11em.
  </div>
</div>

деленья деленья

Примечание: Начиная с версии 4, важно использовать слои. Если вы разместите свой пользовательский стиль по умолчанию за пределами слоя, он будет обладать более высокой специфичностью, чем любой стиль TailwindCSS, размещенный внутри слоя, а это означает, что TailwindCSS не сможет переопределить настройки без слоев.

CSS: Специфика - MDN Docs
CSS: Какой слой будет сильнее? - MDN Docs
Начиная с версии 4, стиль сброса не может быть переопределен CSS-классами Tailwind - StackOverflow

/* unlayered styling is too strong */
/* the whitespace-normal class will be too weak, so it won't take effect */
div {
  white-space: preserve nowrap; /* you overrode it earlier */
}

<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>

<div class="flex flex-col gap-2">
  <div class="whitespace-normal wrap-break-word w-32 border-2">
    Most words are short & don't need to break. But <strong>Antidisestablishmentarianism</strong> is long. The width is set to min-content, with a max-width of 11em.
  </div>
  <div class="w-32 border-2">
    Most words are short & don't need to break. But <strong>Antidisestablishmentarianism</strong> is long. The width is set to min-content, with a max-width of 11em.
  </div>
</div>

деленья деленья

Я отделил базовый стиль CSS от плагина @tailwindcss/typography. Вы можете прочитать о word и переносе строк здесь:

Как обернуть слова и/или тексты - StackOverflow

Плагин: `@tailwindcss/typography`

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

Официальный плагин для типографики Tailwind CSS предоставляет набор prose классов, которые вы можете использовать для добавления красивых типографских настроек по умолчанию к любому стандартному HTML, который вы не контролируете, например, HTML, отображаемый с помощью Markdown или извлеченный из CMS.

Игровая площадка TailwindCSS v3 с @tailwindcss/typography - TailwindCSS v3
Игровая площадка TailwindCSS v4 с @tailwindcss/typography - TailwindCSS v4

Для правильной работы вам необходимо передать корректный HTML-код. В Django это должно быть сделано следующим образом:

safe

<div class="prose">
  {{ post.content | safe }}
</div>

autoescape

<div class="prose">
  {% autoescape off %}
    {{ post.content }}
  {% endautoescape %}
</div>

Отображение переменной шаблона в виде HTML - StackOverflow

Примечание: Однако, если содержимое отформатировано или если у вас есть пользовательские стили, которые переопределяют стили TailwindCSS prose, могут возникнуть проблемы. Рекомендуется протестировать его в отдельной среде, свободной от стилей. Если там это работает, проблема, скорее всего, кроется в ваших собственных стилях, где одно из ваших правил сильнее, чем типографика Tailwind CSS.

Вернуться на верх