Início / coding / Perguntas / 79556563
Accepted
meursault
Asked: 2025-04-05 12:40:09 +0800 CST

O uso seguro de palavras-chave com Django-summernote inibe a quebra de palavras, mesmo com quebra de palavras explícita

  • 772

Estou tentando usar o summernote com o django e estou encontrando esse problema: se eu colar 200 palavras de texto lorem ipsum embutido como teste no texfield, ele mostra o texto corretamente, mas em uma única linha que é muito grande e sai da tela para a direita.

Enquanto que se eu apenas colasse o lorem ipsum conforme codificado no modelo, a quebra de linha funcionaria perfeitamente.

Eu uso o tailwind aqui:

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

O campo de conteúdo é um campo de texto:

content = models.TextField()

Tentei adicionar a palavra-chave linebreaks e definir a quebra de linha para quebrar a palavra, mas não adiantou nada:

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

2 respostas

  1. Best Answer

    Encapsulamento adequado de palavras longas

    CSS -overflow-wrap: break-word;

    word-wrape overflow-wrapsignificam a mesma coisa.

    Nota : A propriedade era originalmente uma extensão da Microsoft não padrão e sem prefixo chamada word-wrap, e foi implementada pela maioria dos navegadores com o mesmo nome. Desde então, foi renomeada para overflow-wrap, word-wrapsendo um 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

    No TailwindCSS v3, o break-wordsutilitário inclui a overflow-wrap: break-word;configuração.

    Portanto, não há diferença entre escrever a solução diretamente no atributo de estilo CSS e usar obreak-words utilitário.

    <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

    Exceto se você estiver usando a v4. Até a v3, algumas overflow-wrappropriedades eram agrupadas ilogicamente com word-break, mas na v4 elas eram separadas; então o equivalente de break-wordsde versões anteriores agora é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>


    Quebra de texto adequada

    E quanto a textos longos? Por padrão, o CSS lida com quebra de texto, mas se você tiver substituído essa configuração anteriormente, o problema que você descreveu pode ocorrer. Felizmente, temos a opção de defini-lo corretamente novamente.

    CSS -white-space: normal;

    Por padrão, essa configuração garante que textos longos sejam quebrados em várias linhas. No entanto, se você a substituiu no seu código, ela pode não estar mais em vigor.

    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>

    Nota : A partir da v4, é importante usar camadas. Se você colocar seu estilo padrão personalizado fora de uma camada, ele terá maior especificidade do que qualquer estilo TailwindCSS colocado dentro de uma camada, o que significa que o TailwindCSS não poderá substituir configurações sem camadas.

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

    • 0

  2. Eu separei o estilo CSS base do @tailwindcss/typographyplugin. Você pode ler sobre quebra de linha e palavra aqui:

    Plug-in:@tailwindcss/typography

    A proseclasse é um utilitário adicional deste plugin. Ela fornece estilo mais especializado para os filhos de elementos com a proseclasse.

    O plugin oficial Tailwind CSS Typography fornece um conjunto de proseclasses que você pode usar para adicionar belos padrões tipográficos a qualquer HTML simples que você não controla, como HTML renderizado do Markdown ou extraído de um CMS.

    Para que funcione corretamente, você precisa passar HTML válido. No Django, é assim que deve ser feito:

    safe

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

    autoescape

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

    Nota : No entanto, se o conteúdo for formatado, ou se você tiver estilos personalizados que substituam os estilos de prosa do TailwindCSS, podem surgir problemas. É uma boa ideia testá-lo em um ambiente separado e sem estilo. Se funcionar lá, o problema provavelmente está em seus próprios estilos, onde uma de suas regras é mais forte do que a Tipografia do TailwindCSS.

    • 0

relate perguntas