Renderize uma string em HTML e preserve espaços e quebras de linha


233

Eu tenho um aplicativo MVC3 que possui uma página de detalhes. Como parte disso, tenho uma descrição (recuperada de um banco de dados) que possui espaços e novas linhas. Quando é renderizada, as novas linhas e espaços são ignorados pelo html. Gostaria de codificar esses espaços e novas linhas para que não sejam ignorados.

Como você faz isso?

Eu tentei HTML.Encode, mas acabou exibindo a codificação (e nem mesmo nos espaços e nas novas linhas, mas em alguns outros caracteres especiais)


Respostas:


546

Apenas estilize o conteúdo com white-space: pre-wrap;.

div {
    white-space: pre-wrap;
}
<div>
This is some text   with some extra spacing    and a
few newlines along with some trailing spaces        
     and five leading spaces thrown in
for                                              good
measure                                              
</div>


1
+1 Esta solução é limpa e eu recomendaria o uso do método SecurityElement.Escape .
Ryan Gates

@ user941632: Você deve ter outro estilo para impedir que ele funcione. Ele funciona em um período aqui: jsfiddle.net/VwGSf/64
pete

44
white-space: pre-line;se você não quiser a primeira linha de cada parágrafo recuado.
Will Schoenberger

4
Este é um bilhete de idade, mas ele ainda pode ser útil adicionar uma referência como MDN para ajudar a explicar o que a resposta aprovados está fazendo :)
Phil D.

e se ainda não olha o jeito que você quiser verificar o espaço em branco entre os seus elementos html (ou a coisinha que lhes gera - por exemplo, um modelo de vue) ...
Yordan Georgiev

43

você já tentou usar <pre>tag.

http://jsfiddle.net/NweRa/


4
Que exibe o valor em uma fonte de largura fixa
Dan dot net

3
você pode usar css para mudar o estilo. Acabei de escrever um exemplo realmente básico. você pode usar a tag <pre> ou css conforme a resposta de @ pete.
N30

20

Você pode usar espaço em branco: pré-linha para preservar quebras de linha na formatação. Não há necessidade de inserir manualmente elementos html.

.popover {
    white-space: pre-line;    
}

ou adicione ao seu elemento html style="white-space: pre-line;"


7

Você deseja substituir todos os espaços por &amp;nbsp;(espaço sem quebra) e todas as novas linhas \npor <<b></b>br>(quebra de linha em html). Isso deve alcançar o resultado que você está procurando.

body = body.replace(' ', &amp;nbsp;).replace('\n', '<<b></b>br>');

Algo dessa natureza.


Isso funcionaria, eu acho que estava pensando que haveria algo embutido. Talvez eu esteja pensando demais.
Dan dot net

Até onde eu vi, não há, mas não é muita sobrecarga fazer uma simples substituição. Eu não acho que o desempenho seria um problema.
Desenvolvedor

Eu acho que o 'problema' do MVC é que, se eu alterar a string, como você sugere, ele exibirá o '& nbsp;' em vez dos espaços, a menos que eu use @ Html.Raw (). Então eu tenho que me preocupar com xss e o usuário digitando html incorreto. No entanto, eu poderia codificar as strings na inserção para que eu pudesse me preocupar menos com isso.
Dan dot net

4

Eu estava tentando a white-space: pre-wrap;técnica declarada por pete, mas se a corda era contínua e longa, acabava de sair do contêiner e não entortava por qualquer motivo, não tinha muito tempo para investigar .. mas se você também estiver tendo o mesmo problema, acabei usando as <pre>tags e os seguintes css e estava tudo bem para ir ..

pre {
font-size: inherit;
color: inherit;
border: initial;
padding: initial;
font-family: inherit;
}

1

Como você mencionou na resposta do @Developer, provavelmente codificaria o HTML na entrada do usuário. Se você está preocupado com o XSS, provavelmente nunca precisará da entrada do usuário em sua forma original, para que possa escapar dela (e substituir espaços e novas linhas enquanto estiver fazendo isso).

Observe que escapar na entrada significa que você deve usar @ Html.Raw ou criar um MvcHtmlString para renderizar essa entrada específica.

Você também pode tentar

System.Security.SecurityElement.Escape(userInput)

mas acho que também não vai escapar dos espaços. Então, nesse caso, sugiro apenas fazer um .NET

System.Security.SecurityElement.Escape(userInput).Replace(" ", "&nbsp;").Replace("\n", "<br>")

na entrada do usuário. E se você quiser se aprofundar na usabilidade, talvez possa fazer uma análise XML da entrada do usuário (ou brincar com expressões regulares) para permitir apenas um conjunto predefinido de tags. Por exemplo, permita

<p>, <span>, <strong>

... mas não permita

<script> or <iframe>

0

Quebra a descrição em um textareaelemento.


0

Existe uma maneira simples de fazer isso. Eu tentei no meu aplicativo e funcionou muito bem.

Basta digitar: $ text = $ row ["text"]; eco nl2br ($ text);

Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.