Safe keyword usage with Django-summernote inhibits word wrapping even with explicit word wrapping

I am trying to use summernote with django and am encountering this issue where if I paste 200 words of inline lorem ipsum text as a test in the texfield, it correctly shows the text, but in a single line that is too big and goes off screen to the right.

Where as if i just paste the lorem ipsum as hard coded in the template, the word wrap works perfectly fine.

I use tailwind here:

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

The content field is a is a text field:

content = models.TextField()

I tried adding the linebreaks keyword and setting the word-wrap to break word but it did nothing:

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

Proper wrapping of long words

CSS - overflow-wrap: break-word;

word-wrap and overflow-wrap mean the same thing.

Note: The property was originally a nonstandard and unprefixed Microsoft extension called word-wrap, and was implemented by most browsers with the same name. It has since been renamed to overflow-wrap, with word-wrap being an alias.

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>

TailwindCSS v3 - break-words

In TailwindCSS v3, the break-words utility includes the overflow-wrap: break-word; setting.

So there's no difference between writing the solution directly in the CSS style attribute and using the break-words utility.

<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>

TailwindCSS v4 - wrap-break-word

Except if you're using v4. Up until v3, some overflow-wrap properties were illogically bundled with word-break, but in v4 they were separated; so the equivalent of break-words from earlier versions is now wrap-break-word.

<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>


Proper text wrapping

What about long texts? By default, CSS handles text wrapping, but if you've overridden this setting earlier, the issue you described can occur. Fortunately, we have the option to set it correctly again.

CSS - white-space: normal;

By default, this setting ensures that long texts wrap onto multiple lines. However, if you've overridden it in your code, it may no longer be in effect.

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>

TailwindCSS v3, v4 - whitespace-normal

@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>

Note: Starting from v4, it's important to use layers. If you place your custom default styling outside of a layer, it will have higher specificity than any TailwindCSS styling placed inside a layer, meaning TailwindCSS won't be able to override unlayered settings.

/* 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>

I have separated the base CSS styling from the @tailwindcss/typography plugin. You can read about word and line wrapping here:

Plugin: @tailwindcss/typography

The prose class is an additional utility of this plugin. It provides more specialized styling for the children of elements with the prose class.

The official Tailwind CSS Typography plugin provides a set of prose classes you can use to add beautiful typographic defaults to any vanilla HTML you don't control, like HTML rendered from Markdown, or pulled from a CMS.

In order for it to work properly, you need to pass valid HTML. In Django, this is how it should be done:

safe

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

autoescape

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

Note: However, if the content is formatted, or if you have custom styles that override the TailwindCSS prose styles, issues may arise. It's a good idea to test it in a separate, style-free environment. If it works there, the problem likely lies in your own styles, where one of your rules is stronger than the TailwindCSS Typography.

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